定義された幅を取得したい列の100％幅に設定されたテーブルがあります。ただし、すべての列の幅が同じように見えます。
.table {
table-layout: fixed;
width: 100%;
}
.table th[colspan=4] {
/* width: 100%; */
}
.table td,
th {
border: 1px solid #AAA;
text-align: center;
}
.table td.one {
width: 10%;
}
.table td.two {
width: 20%;
}
.table td.three {
width: 50%;
}
.table td.four {
width: 20%;
}<table class="table">
<tbody>
<tr>
<th colspan="4">All Four</th>
</tr>
<tr>
<th colspan="4">All Four</th>
</tr>
<tr>
<td class="one">A</td>
<td class="two">B</td>
<td class="three">C</td>
<td class="four">D</td>
</tr>
</tbody>
</table>テーブルのwidthプロパティを削除すると、個々の列の幅が尊重されます。レイアウトをに変更するとtable-layout: auto、それも機能します。しかし、最初の行として複数の列にまたがる行がある場合、幅を希望どおりにするにはできません。
テーブルのwidthプロパティを削除すると、個々の列の幅が尊重されます。レイアウトをtable-layout：autoに変更すると、それも機能します。しかし、最初の行として複数の列にまたがる行がある場合、幅を希望どおりにするにはできません。
それがどのようにtable-layout: fixed機能するかです。
ここから：https：//developer.mozilla.org/en-US/docs/Web/CSS/table-layout
テーブルと列の幅は、テーブル要素と列要素の幅、またはセルの最初の行の幅によって設定されます。後続の行のセルは列幅に影響しません。
そしてここから：https：//www.w3.org/TR/CSS21/tables.html#fixed-table-layout
このようにして、最初の行全体が受信されると、ユーザーエージェントはテーブルのレイアウトを開始できます。後続の行のセルは列幅に影響しません。
したがって、事実上：
autoに変更すると、自動テーブルレイアウトが使用され、列幅がコンテンツサイズよりも優先されます。widthテーブルのプロパティを削除すると、固定テーブルレイアウトの使用が停止され、と同じくらい良好になりautoます。他の答えwidthは、プロパティが削除されているために機能します（質問で述べたように）。上にリンクされている仕様に戻って参照すると、次のようになります。
テーブルの幅は、「width」プロパティで明示的に指定できます。'auto'の値（ 'display：table'と 'display：inline-table'の両方）は、自動テーブルレイアウトアルゴリズムを使用することを意味します。
解決策：
問題の解決策は、テーブルレイアウトで最初の行を無視するようにすることです。これはcolgroup/col要素によって行われます。の幅を定義するクラスを削除し、の幅tdを指定しますcols。
スニペット：
.table { table-layout: fixed; width: 100%; }
.table td, th {
border: 1px solid #aaa;
text-align: center; padding: 4px;
}
.table col.one { width: 10%; }
.table col.two { width: 20%; }
.table col.three { width: 50%; }
.table col.four { width: 20%; }<table class="table">
<colgroup>
<col class="one"/>
<col class="two"/>
<col class="three"/>
<col class="four"/>
</colgroup>
<tbody>
<tr><th colspan="4">All Four</th></tr>
<tr><th colspan="4">All Four</th></tr>
<tr>
<td >A</td>
<td >B</td>
<td >C</td>
<td >D</td>
</tr>
</tbody>
</table>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加