我有一个表格,我希望标题行中的每个单元格都具有相同的宽度。这是我当前的代码:
table {width:100%}
table td{border: 1px solid}
.header td{ }Run Code Online (Sandbox Code Playgroud)
<html>
<table>
<tr class="header"><td colspan="2">header </td><td> header</td></tr>
<tr><td> content </td><td> content </td><td> content </td></tr>
</table>
</html>Run Code Online (Sandbox Code Playgroud)
基本上,我可以用这个得到结果。
table td{border: 1px solid}
.header td{ width: 100px}Run Code Online (Sandbox Code Playgroud)
<html>
<table>
<tr class="header"><td colspan="2">header </td><td> header</td></tr>
<tr><td> content </td><td> content </td><td> content </td></tr>
</table>
</html>Run Code Online (Sandbox Code Playgroud)
但是,我想要以下东西:
table-layout:fixed;当未指定宽度或应用指定宽度而不扩展时,您可能只是寻找均匀喷涂的列:
table {width:100%; table-layout:fixed;}
table td{border: 1px solid}
.header td{ }Run Code Online (Sandbox Code Playgroud)
<html>
<table>
<tr class="header"><td colspan="2">header </td><td> header</td></tr>
<tr><td> content </td><td> content </td><td> content </td></tr>
</table>
</html>Run Code Online (Sandbox Code Playgroud)
注意使用th和/或theader过滤标签/内容
table td, th{
border: 1px solid;
table-layout:fixed;/* sprays evenly col width if no width set */
}
.header td{
width:100px; /* table-layout if fixed will follow this value */
}Run Code Online (Sandbox Code Playgroud)
<html>
<table>
<tr class="header"><th colspan="2">header header header </th><th> header</th></tr>
<tr><td> content </td><td> content </td><td> content content content </td></tr>
</table>
</html>Run Code Online (Sandbox Code Playgroud)