HTML行单元格为空时如何缩小或隐藏？

Question

我在html表行中有几个链接。在代码背后，我隐藏了一些基于某些条件的链接。但页面看起来不太好，并显示隐藏控件的空格。

当HTML行是空单元格时，如何用CSS删除这个空格。

网页上的html代码

Answer 1

<强> Working jsFiddle Demo

$(function () {
    $('table tr').each(function () {
        var flag = true;
        $(this).find('td').each(function () {
            var l = $(this).html().replace(/\s+/g, '').length;
            if (l) {
                flag = false;
            }
        });

        if (flag) {
            $(this).remove();
        }
    });
});

Answer 2

您可以尝试使用col标签在一个位置为所有行执行表样式，但是您需要在表或表css类上设置table-layout：fixed样式并为单元格设置溢出样式< / p>

http://www.w3schools.com/TAGS/tag_col.asp

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

这是你的CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Answer 3

首先，设置一个类属性（通过键入class="xxxxx"，其中xxxxx是您要用于类的名称，在html元素的开始标记中），用于每个<tr>被隐藏如果你动态地这样做，使用jQuery或其他东西。确保同时隐藏的所有<tr>具有相同的类。然后在CSS中使用.xxxxx{display:none}。如果你使用display:none你的表行仍然是那里（我假设你想要），但不会占用任何空间。

Answer 4

检查此演示http://jsfiddle.net/yeyene/6SHPP/1/

如果您的单元格中没有任何内容或有空格，则此脚本将全部隐藏。

$('table td').each(function () {
    if( $(this).text() == '' || $(this).text() == ' ' )
        $(this).parent('tr').remove();       
});