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

td:empty {display:none;}

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

Answer 2

您可以尝试this Fiddle。似乎运作良好。在下面的CSS中，我使用:: empty伪选择器。该选择器在IE8或更低版本中不起作用，所以如果你支持IE8，那么你需要用一些javascript来增加这些代码以隐藏那些空的<td>。

<强> CSS

table
{
    width: 400px;
    table-layout: fixed;
}
td:empty { display: none; }

Answer 3

我已经尝试使用jQuery代码:)，您可以使用以下代码使用jQuery：

$("#parent td").each(function() {


     if ($(this).text() == ''){
         var val=$(this).val();
        //alert(len);
     $(this).remove();


     }

});
var len=$("#parent td").length;
         var wit=100/len;
     //wit=wit+"%";
$("table td").width(wit + "%");

在此处更新http://jsfiddle.net/zTbGB/6/

如何使html表列（只有文本的列）均匀分布

3 个答案: