※ ChatGPTを利用し、要約された質問です(原文:table 幅指定でtheadとtbodyがずれる)
table幅指定でtheadとtbodyがずれる
このQ&Aのポイント
bootstrapを使っている場合、幅指定が必要な場合は、tableの親要素にclass名を設定し、そのclassに幅指定をすることで解決できます。
具体的には、tableの親要素のclassに「scroll1」というclass名を設定し、そのclassにwidth: 1600px; table-layout: fixed;というスタイルを指定します。
また、theadとtbodyの幅がずれる場合は、theadとtbodyそれぞれにfloat: left;というスタイルを指定し、tbodyにheight: 350px; overflow-y: scroll;というスタイルを追加することで解決できます。
table 幅指定でtheadとtbodyがずれる
bootstrapを使っているのですが、
個別に幅設定がしたいので、htmlに下記を追加しました。
theadは問題なく幅設定できているのですが、tbodyがうまく適用されていないようで
theadとずれてしまいます。
theadとtbodyの幅を合わせるにはどのようにすれば良いでしょうか?
<style type="text/css">
.scroll1 {
width: 1600px;
table-layout: fixed;
}
.scroll1 thead, .scroll1 tbody {
float: left;
}
.scroll1 tbody {
height: 350px;
overflow-y: scroll;
}
.c1 { table-layout: fixed;width: 200px; }
.c2 { table-layout: fixed;width: 100px; }
.c3 { table-layout: fixed;width: 100px; }
.c4 { table-layout: fixed;width: 200px; }
.c5 { table-layout: fixed;width: 200px; }
.c6 { table-layout: fixed;width: 200px; }
.c7 { table-layout: fixed;width: 100px; }
.c8 { table-layout: fixed;width: 250px; }
.c9 { table-layout: fixed;width: 250px; }
</style>
<table class="table table-bordered table-striped">
<tr>
<td>
<table border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1">
<thead>
<tr style="">
<th class="c1">アクション</th>
<th class="c2">店舗コード</th>
<th class="c3">ユーザID</th>
<th class="c4">ユーザパスワード</th>
<th class="c5">ユーザ名</th>
<th class="c6">メールアドレス</th>
<th class="c7">管理権限</th>
<th class="c8">更新日</th>
<th class="c9">登録日</th>
</tr>
</thead>
<tbody>
<tr style="">
<td style="width:200px;table-layout:fixed">
<input type="submit" value="削除" />
<input type="submit" value="編集" />
</td>
<td style="width:100px;table-layout:fixed">
<span >2697</span>
</td>
<td style="width:100px;table-layout:fixed">
<span >002</span>
</td>
<td style="width:200px;table-layout:fixed">
<span >000000</span>
</td>
<td style="width:200px;table-layout:fixed">
<span >大築</span>
</td>
<td style="width:100px;table-layout:fixed">
<span ></span>
</td>
<td style="width:100px;table-layout:fixed">
<span >0</span>
</td>
<td style="width:250px;table-layout:fixed">
<span >2014/11/08 21:20:39</span>
</td>
<td style="width:250px;table-layout:fixed">
<span >2014/11/08 21:20:48</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
お礼
ありがとうございます。 無事調整することができました!