こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>

投稿日時 - 2015-01-09 13:32:10

QNo.8885339

すぐに回答ほしいです

質問者が選んだベストアンサー

・メールアドレスのとこの幅が
 theadとtbodyで一致していない
・theadにスクロールバー分のスペースが用意されていない
てとこじゃないかしら

投稿日時 - 2015-01-09 13:50:55

お礼

ありがとうございます。
無事調整することができました!

投稿日時 - 2015-01-10 10:29:02

このQ&Aは役に立ちましたか?

6人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問