以前に「<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;}
よろしくお願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
対処法は
<table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる - Webデザイン・CSS | 教えて!goo( https://oshiete.goo.ne.jp/qa/9273531.html )
で示しましたから、そちらを見てください。
fixedはそうしたものですから、ここで使うべきではない。使うならabsoluteです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- 工学 【制御工学】単位ステップ応答の遅れ時間の求め方(令和2年度の機械設計技術者試験(制御工学)の問題) 3 2022/11/02 10:51
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルのヘッダとボディの幅...
-
tableにul,または,olを入れられ...
-
文字列が入っているtdを削除せ...
-
cssで、表示されるテキストによ...
-
テーブルの任意の列を非表示に...
-
表組の均等割り付け
-
テーブルのセルに画像をピッタ...
-
safariで特定条件下でデーブル...
-
TRタグの余白をcssで設定するには
-
テーブル(表)を2つ横に並べて...
-
Htmlのtd要素の中で半角の空...
-
表の1列だけをCSSを使って右揃...
-
テーブルの行の高さを指定する...
-
エクセルをhtml変換した、html...
-
HTMLのテーブルで桁をそろ...
-
ホームページ 表の上の余白を...
-
スタイルシートで colspan=3と...
-
EXCELからhtmlへの変換で罫線が...
-
HTML <td></td>タグ セル内余...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
HTML <td></td>タグ セル内余...
-
cssで、表示されるテキストによ...
-
テーブルの表示がずれます
-
テーブルの行の高さを指定する...
-
中に<table></table>が使えるア...
-
テーブルのセルに画像をピッタ...
-
スタイルシートで colspan=3と...
-
ホームページ 表の上の余白を...
-
EXCELからhtmlへの変換で罫線が...
-
表の1列だけをCSSを使って右揃...
-
tableの要素(tr、td)に一...
-
逆L字の表(table)組み
-
テーブルタグのセルの幅の一部...
-
HTMLで外部ファイルの読み込み
-
表の中の列の順番を入れ替える...
おすすめ情報