有关表格table-layout:fixed属性的问题

最新推荐文章于 2025-10-20 17:40:01 发布

原创最新推荐文章于 2025-10-20 17:40:01 发布 · 5.1k 阅读

4 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了解决在CSS中使用table-layout:fixed属性时遇到的单元格宽度不生效的问题。提供了两种解决方案：一是添加一个隐藏的表格行来定义各列宽度；二是利用col元素来指定列宽。

对表格设置table-layout:fixed属性以后，如果表格的第一行tr中的td设置过单元格合并，后面tr中的td无论如何设置宽度都没有任何效果，针对这个问题有如下两种解决方法

1 在表格的第一行设置一个隐藏的行如下:

<table style="table-layout: fixed; width:100%;">
	<tr style="display:none">
		<td width="30%"></td>
		<td width="40%"></td>
		<td width="30%"></td>
	</tr>
	<tr>
		<td colspan="3">统计表</td>
	</tr>
	<tr>
		<td>111</td>
		<td>222</td>
		<td>333</td>
	</tr>
</table>

2 在表格的tbody前插入col元素

<table>
	<col style="width:100px"/>
	<col style="width:200px"/>
	<col style="width:300px"/>
	<tbody>
	<tr>
		<td colspan="3">统计表</td>
	</tr>
	<tr>
		<td>111</td>
		<td>222</td>
		<td>333</td>
	</tr>
	</tbody>

对于表格单元格文字过长，可以通过设置td的属性word-wrap:break-word