Hiding fixed width columns?

sergiozambrano · 08-04-2012, 03:17 PM

I successfully achieved column hiding scripts, a few ones, with different tricks, and I got to a dead end.

The columns must be fixed width (table-layout:fixed) so the table looks neat, BUT I need them to re-distribute when I hide one (its cells, actually), but instead the hole where the hidden ones were remain.

So I can't have both… at least there's a trick to get columns widths even, without table-layout fixed… or re-distribute them even with table-layout: fixed.
I have a few ideas for updating the cols or table widths with jQuery, but I wanted to exhaust all the possibilities with CSS only first.

Do you know any trick for that?

Thanks.

AndrewGSW · 08-04-2012, 05:53 PM

I don't think table-layout: fixed does what you think it does. It only affects the way the rendering of the table is achieved, it doesn't really fix anything. W3

If there is a gap when you hide a column then you are probably using visibility: hidden rather than display: none - which would completely remove them from the page.

I haven't managed to fully conquer column widths. I've found that it can work if I insert DIVs into cells and set these to a specific width.

Otherwise you could apply a class to every td/th and use JS or jQuery to switch these classes.

AndrewGSW · 08-04-2012, 06:13 PM

Try this:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Fixed Width Table Cols</title>
<style type="text/css">
    table {
        width: 400px;
        table-layout: fixed;
        outline: 1px solid gray;
    }
    col.has4 {
        width: 100px;
    }
    col.has3 {
        width: 133px;
    }
    td {
        overflow: hidden;
    }
    
</style>


</head>

<body>
<table>
    <col class="has4">
    <col class="has4">
    <col class="has4">
    <col class="has4">
    
    <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
    <td>Fourth Column</td>
    </tr>
    <tr>
    <td>Row 1</td>
    <td>Text</td>
    <td>1</td>
    <td>4</td>
    </tr>
    <tr>
    <td>Row 2</td>
    <td>Abcdefg</td>
    <td>123</td>
    <td>40</td>
    </tr>
    <tr>
    <td>Row 3</td>
    <td>Abcdefghijklmnop</td>
    <td>123456</td>
    <td>40,000</td>
    </tr>
    <tr>
    <td>Row 3</td>
    <td>Abcdefghijklmnop</td>
    <td>123456</td>
    <td>400,000</td>
    </tr>
</table>

</body>
</html>

If you hide a column by setting display:none you can then use JS or jQuery to change the col tags to use class 'has3'.

In jQuery it would be something like:

Code:

$('#someButton').click(function () {
    // hide the column.. then,
    $('table col').addClass('has3').removeClass('has4');
});

AndrewGSW · 08-04-2012, 06:46 PM

This works

Code:

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type="text/javascript">
    $(function() {
            $('#clickMe').click(function () {
            $('table col').eq(2).hide();
            $('table col').addClass('has3').removeClass('has4');
        });
    });
</script>