Question

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

＆＃13;

table {width:100%}
table td{border: 1px solid}
.header td{ }

＆＃13;

<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>

＆＃13;

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

＆＃13;

	
table td{border: 1px solid}
.header td{ width: 100px}

＆＃13;

<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>

＆＃13;

但是，我想要以下事项：

该表必须支持变量（％）宽度。
css必须使用可变数量的列（因此设置宽度为50％不起作用）
如果可能，我正在寻找一个仅限css的解决方案（没有javascript）

Answer 1

如果没有指定宽度，你可以查看table-layout:fixed;喷涂均匀cols，或者在不扩展的情况下应用指定宽度：

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>

Answer 2

据我了解你的问题，可以用这样的j来解决：

var heads = $('table thead tr th');
var len = heads.length;
$.each(heads, function(i, e){
  $(e).width(100.0/len + '%');
});

http://fiddle.jshell.net/311k5c6g/

我无法找到纯粹的CSS解决方案。

table set td width对于行中的所有单元格都相同

2 个答案: