SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Redistributing visible columns with table-layout fixed challenge

    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am assuming you are dealing with tabular data as opposed to using tables for lay out , which is a no-no.

    Conceptually you are asking mutually exclusive concepts. You want something 'fixed' which is 'fluid'. See the catch 22 there? But maybe you are referring to the table and not the columns themselves "table-layout:" refers to the algorithm used to calculate table rendering.

    If you use .js to toggle a class on on the columns to be hidden the table should automatically draw to accommodate the remaining content.

    Study the following example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    	<head>
    		<title></title>
    		<style type="text/css">
     table{ table-layout: fixed; border-collapse: separate; border-spacing: 5px; border: 1px solid red; width:500px;}
     td{border: 1px solid; padding:15px}
     .hide{display:none;}
     td:first-child{width: 30px;}
    		</style>
    	</head>
    	<body>
    <table>
    <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td class="hide">cell4</td>
    <td>cell5</td>
    </tr>
    <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td class="hide">cell4</td>
    <td>cell5</td>
    </tr>
    <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td class="hide">cell4</td>
    <td>cell5</td>
    </tr>
    <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td class="hide">cell4</td>
    <td>cell5</td>
    </tr>
    
    </table>
    	</body>
    </html>
    hope that helps

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dresden_phoenix,

    Thanks for your answer.
    I found the issue, and your code won't make it break without a colgroup. That's what causes the error.
    Anyway, your code made me easier to show the issue.
    (in the following example, click any TD to hide the third column. Then remove colgroups, and you'll see it working again, even with thead and tfoot tags)
    http://jsfiddle.net/sergiozambrano/ymZwR/1/

    I'll have to change the way I styled the columns, though

    I hope it helps others.


Bookmarks

Posting Permissions

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