以前に「<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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
最近、いつ泣きましたか?
泣いてストレス発散! なんて言いますよね。 あなたは最近いつ、どんなシチュエーションで泣きましたか?
-
家・車以外で、人生で一番奮発した買い物
どんなものにお金をかけるかは人それぞれの価値観ですが、 誰もが一度は清水の舞台から飛び降りる覚悟で、ちょっと贅沢な買い物をしたことがあるはず。
-
CDの保有枚数を教えてください
ひとむかし前はCDを買ったり借りたりが主流でしたが、サブスクで簡単に音楽が聴ける今、CDを手に取ることも減ってきたかと思います。皆さんは2024年現在、何枚くらいCDをお持ちですか?
-
昨日見た夢を教えて下さい
たまにすごいドラマチックな夢見ること、ありませんか? 起きてからも妙に記憶に残っているような、そんな夢。
-
14歳の自分に衝撃の事実を告げてください
タイムマシンで14歳の自分のところに現れた未来のあなた。 衝撃的な事実を告げて自分に驚かせるとしたら何を告げますか?
-
<table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
テーブルの行を折りたたみたい...
-
逆L字の表(table)組み
-
ホームページ 表の上の余白を...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
表の一部を結合するには?
-
tableにul,または,olを入れられ...
-
44行目: パラメータ '__format'...
-
テーブルの任意の列を非表示に...
-
HTMLで文とテーブルの間が空く。
-
EXCELのセル内にHTMLタグを含む...
-
テーブル結合 縦横両方するには?
-
safariで特定条件下でデーブル...
-
width指定したTDでwhite-space:...
-
HTMLのテーブルで桁をそろ...
-
divの中にtableを入れています...
-
FireFoxのhtmlでtheadとtbodyの...
-
文字列が入っているtdを削除せ...
-
掲示板//インラインフレーム内...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
ホームページ 表の上の余白を...
-
テーブルのセルに画像をピッタ...
-
中に<table></table>が使えるア...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
スタイルシートで colspan=3と...
-
テーブルの装飾
-
EXCELのセル内にHTMLタグを含む...
-
tableの要素(tr、td)に一...
-
テーブルの表示がずれます
-
tableでcolspanを使うと次行以...
-
HTMLで文とテーブルの間が空く。
-
テーブルの行の高さを指定する...
-
値が0なら非表示にしたい
おすすめ情報