表将行中所有单元格的 td 宽度设置为相同

use*_*177 3 html css

我有一个表格,我希望标题行中的每个单元格都具有相同的宽度。这是我当前的代码:

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)

但是,我想要以下东西:

  • 该表必须支持可变 (%) 宽度。
  • css 必须处理可变数量的列(因此将宽度设置为 50% 不起作用)
  • 如果可能的话,我正在寻找一个仅CSS的解决方案(没有JavaScript)

G-C*_*Cyr 5

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)