<p>table-layout:fixed;を指定したうえでcolspanがあるとき、赤色の部分は、width:90pxを指定してるのに効かない</p>
<table class="table-colspan">
<thead>
<tr>
<th colspan="2">テーブルタイトル</th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="w_90"></td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td></td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td></td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</tbody>
</table>
<p>table-layout:auto;にしたら効く</p>
<table class="table-layout-auto">
<thead>
<tr>
<th colspan="2">テーブルタイトル</th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="w_90"></td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td></td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td></td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</tbody>
</table>
<a href="https://mogumogu-design.com/table-th-td-width/" target="_blank">元サイト</a>
body{
color:#666;
max-width:400px;
}
*{
box-sizing:border-box;
}
table{
border:1px solid #ccc;
border-collapse:collapse;
margin:20px;
width:100%;
th,td{
padding:10px;
border:1px solid #ccc;
}
.w_90{
width:100px;
background:#ffbdbd;
}
}
.table-colspan{
table-layout:fixed;
}
.table-layout-auto{
table-layout:auto;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.