Redistributing visible columns with table-layout fixed challenge

HTML & CSS
1

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

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:


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

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)

I’ll have to change the way I styled the columns, though :frowning:

I hope it helps others.