html - 如何使 html 表格列(只有带有文本的列)间隔均匀

Question

我想知道是否有一种简单的方法可以通过 HTML/CSS 做到这一点。

我有一个 4 列的动态固定宽度表格:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

我想要的是始终让所有包含数据的列都具有相同的宽度。

因此，如果任何一列完全为空，我希望它折叠起来，其余列都具有相同的宽度。

我知道我的 jsFiddle是不正确的，但我想以一个为起点。

我做了评论How to get table cells evenly spaced? ，但不完全是我要找的。 我还评论了Evenly spaced fixed-width columns - in a responsive setting , 但那个也不一样。

编辑:

td:empty {display: none} 不是解决方案，因为如果另一行在该列中有文本，表格就会失真。 jsFiddle

Answer 1

更新

如果超过一行:

解决方案如下所述，要让它工作，你需要<tr>显示为单个表格:http://jsfiddle.net/zTbGB/7/ http://jsfiddle.net/zTbGB/8/

tr {
    display:table;
     table-layout: fixed;
    width:100%;
}

============================================= ==

你可以设置:table-layout:fixed在表格元素上。 http://jsfiddle.net/zTbGB/1/

参见:http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

然后你可以使用 :empty 选择器:

td:empty {display:none;}

http://jsfiddle.net/zTbGB/3/