How to shrink or hide when HTML rows cells are empty?

Question

I have couple of links on in html table rows. In code behind I am hiding couple of links based on some conditions. But page looks not good and showing spaces which hided controls.

So how to remove this spaces with CSS when HTML rows are empty cells.

html code on web page enter image description here

enter image description here

Whilst it is cool you have included your code; a screenshot is not sufficient. Please paste your code here and, for extra bonus points, make a JSfiddle. — redditor, Jun 20 '13 at 03:19
Have you tried using Firebug (or an equivalent) to look at the calculated markup? Also at a broader level: do you really need to be using a table? It's generally not seen as the best method these days. See: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1 — Nick, Jun 20 '13 at 03:22

score 1 · Accepted Answer · answered Jun 20 '13 at 03:24

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();
        }
    });
});

score 0 · Answer 2 · answered Jun 20 '13 at 03:21

You could try using the col tag to do table styling in one place for all rows but you will need to set the table-layout:fixed style on the table or the tables css class and set the overflow style for the cells

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>

and this be your CSS

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

score 0 · Answer 3 · answered Jun 20 '13 at 03:26

First, set a class attribute (by typing class="xxxxx", where xxxxx is the name that you want to use for the class, in the opening tag of your html element) for each <tr> that will be hidden. If you're doing this dynamically, use jQuery or something. Make sure that all <tr>s that will be hidden at the same time have the same classes in common. Then use .xxxxx{display:none} in your CSS. If you use display:none your table row will STILL BE THERE (which I assume you want) but will not take up any space.

yeyene · Answer 4 · 2013-06-20T04:19:37.167

0

Check this DEMO http://jsfiddle.net/yeyene/6SHPP/1/

If your cell has nothing or having a space, this script will hide them all.

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

edited Jun 20 '13 at 04:19

answered Jun 20 '13 at 04:12

yeyene

7,297
1
21
29

This won't work correctly in multiple cells in a row, see this [fiddle](http://jsfiddle.net/6SHPP/2/). – Jun 20 '13 at 04:31

How to shrink or hide when HTML rows cells are empty?

4 Answers4