我有两行，第一行有一些东西决定了行的宽度； 在第二行，我有几组元素，旨在并排包含两个元素。 我想在第二行的这些元素组之间留出均匀的空间。它们应该遍及整个单元格并占据它的所有宽度。 你能给我建议吗？
代码是这样的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
<tr>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
</tr>
<tr>
<td colspan="5" align="justify">
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group2 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group3 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group4 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
</tr>
</table>
</body>
</html>
编辑:到目前为止，我做到了这一点，并且几乎做到了。但是第一组和最后一组之间的空间不均匀。有什么想法吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
table.ball {empty-cells: show}
table.ball td {text-align:center;border:1px solid blue;}
table.ball td:nth-last-of-type(1) {text-align:right; }
table.ball td:nth-of-type(1) {text-align:left;}
select.sorter {width:180px}
</style>
</head>
<body>
<table >
<tr>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
</tr>
<tr>
<td colspan="5" align="middle" >
<table class="ball" width="100%" >
<colgroup>
</colgroup>
<tr>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
最佳答案
也许 this example接近你所需要的。我删除了您的一些硬编码信息并将其放入 css 中。
table {table-layout: fixed; border-collapse: collapse;}
td {width: 200px; border: 1px solid black;}
.sorter, .dir {width: 11.5%;}
td[colspan="5"] {text-align: center;}
11.5% 的宽度似乎效果很好，尽管在数学上它似乎应该更接近 12.5%，但是 select 元素在其右侧有额外的空间时做了一些时髦的事情。但是，text-align: center 使它们保持均匀间隔。
关于html - 如何连续拉伸(stretch)/对齐元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9646590/