Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Hiding fixed width columns?

    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.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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');
    });
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •