如何使html表列(只有文本的列)均匀分布

概述我想知道是否有一种简单的方法可以通过 HTML / CSS完成此 *** 作. 我有一个动态的固定宽度表,有4列： <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr></table> 我想要的是所有具有数据的列都具有相同的宽度. 因此,如果任何列完全为空,我希 我想知道是否有一种简单的方法可以通过 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

解决方法 UPDATE

如果是多行：

解决方案如下所述,为了使其工作,您需要< tr>显示为单个表：http://jsfiddle.net/zTbGB/7/ http://jsfiddle.net/zTbGB/8/

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

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

你可以设置：table-layout：固定在table元素上.
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/

总结

以上是内存溢出为你收集整理的如何使html表列(只有文本的列)均匀分布全部内容，希望文章能够帮你解决如何使html表列(只有文本的列)均匀分布所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。