...

View Full Version : 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 (http://www.w3.org/TR/CSS21/tables.html#width-layout)

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:


<!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:


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

AndrewGSW
08-04-2012, 06:46 PM
This works :thumbsup:


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum