プロが教えるわが家の防犯対策術!

以前に「<table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる」という質問をしました。
https://oshiete.goo.ne.jp/qa/9273531.html
<colgroup>を使うことで<thead>がposition:fixed;になると<td>の幅がリセットされてしまう現象は改善されました。しかし、<th>の幅が期待通りにならないので改めて質問します。

Webページをスクロールしたら<table>の<thead>が上部に固定されるようにしたのですが、
固定された後の<th>の幅が固定される前とは異なってしまいます(添付画像参照)。
固定された後のソースを確認すると<th>は<th style="width: 330pt;">などに変わっています。
次のソースのどこを改善したらよろしいでしょうか?
できるだけシンプルな解決策を教えてください。


試したtest.htmlのソースは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすと</title>
<link rel="stylesheet" href="test.css">
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
</head>
<body>
<h1>テスト</h1>
<table>
<colgroup>
<col span="1" class="left1">
<col span="1" class="left2">
<col span="1" class="left3">
<col span="10" class="left4">
</colgroup>
<thead>
<tr>
<th>thead</th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th>
</tr>
</thead>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
<tr>
途中省略
</tr>
</table>

<script type="text/javascript">
<!--
var nav_offset = $('thead').offset().top;
$(window).on('scroll load',function(){
var now_offset = $(window).scrollTop();
if ( now_offset >= nav_offset ) {
$('thead').css({'position':'fixed','top':'0','width':'1300pt'});
$('th:nth-child(1)').css('width','330pt');
$('th:nth-child(2)').css('width','70pt');
$('th:nth-child(3)').css('width','250pt');
$('th:nth-child(n+4)').css('width','65pt');
} else {
$('thead').css('position','inherit');
}
});
-->
</script>

</body>
</html>

test.cssは次の通りです。
@charset "UTF-8";

h1{height:100pt;}
table{table-layout:fixed;}
table,tr{width:1300pt;}
th,td{border:solid 5px black;text-align:center;height:100pt;}
th{background-color:red;}
tr:nth-child(2n+1){background-color:blue;}
tr:nth-child(2n+0){background-color:white;}
.left1{width:330pt;}
.left2{width:70pt;}
.left3{width:250pt;}
.left4{width:65pt;}

よろしくお願いします。

「<table>の<thead>をposi」の質問画像

A 回答 (1件)

対処法は


<table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる - Webデザイン・CSS | 教えて!goo( https://oshiete.goo.ne.jp/qa/9273531.html )
で示しましたから、そちらを見てください。

fixedはそうしたものですから、ここで使うべきではない。使うならabsoluteです。
    • good
    • 0
この回答へのお礼

回答ありがとうございました。

お礼日時:2016/05/14 13:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!