个人中心
gpt4 book ai didi

html - table 为行中的所有单元格设置相同的 td 宽度

转载 作者：行者123 更新时间：2023-12-05 01:47:16 24 4
gpt4 key购买 nike

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

table {width:100%}
table td{border: 1px solid}
.header td{ }
<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>

基本上，我可以用这个得到结果。

	
table td{border: 1px solid}
.header td{ width: 100px}
<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>

但是，我想要以下东西:

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

最佳答案

你可能只是寻找 table-layout:fixed; wich spray evenly cols when not width is specified or applyes width specified width is specified without expanding :

table {width:100%; table-layout:fixed;}
table td{border: 1px solid}
.header td{ }
<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>

注意使用 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 */
}
<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>

关于html - table 为行中的所有单元格设置相同的 td 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28985198/

24 4 0
文章推荐： spring-amqp - RabbitMQ SSL 连接与 spring-amqp 1.4.3
文章推荐： ansible - 如何在同一个 ansible 剧本中最好地组织安装和删除？
文章推荐： batch-file - 批处理文件中的颜色回显
文章推荐： proxy - 如何将流量从 mitmproxy 发送到另一个代理服务器