Hidding Table Row While Preserving Colspan

Someone asked me today how to write the CSS for a <TR> so that the <TD colspan”2″> would still maintain the colspan when the display was changed from none to show. It turns out the solution is easier than you might think. He actually came up with the solution, but I took it a step further and updated it so include a toggle. Now you can repeatedly change the row from hidden to visible. Keep reading to see the solution.

Here is what the table would look like:

Column 1	Column 2
Column 1	Column 2
Column 1	Column 2
SPAN the width

Now when you click on the Column2 link, the colspan row underneath will appear with the colspan in tact.

Here is the code:

<script language="javascript">
function toggle() {
 if(document.getElementById("toggleText").style.display == "none") {
 document.getElementById("toggleText").style.display = "";
 }
 else {
 document.getElementById("toggleText").style.display = "none";
 }
}
</script>

<table border="1" style="display:inline-table">
<tr>
 <td>Column 1</td>
 <td>Column 2</td>
</tr>
<tr>
 <td>Column 1</td>
 <td>Column 2</td>
</tr>

<tr>
 <td>Column 1</td>
 <td><a href="javascript:toggle();">Column 2</a></td>
</tr>
<tr id="toggleText" style="display:none;">
 <td colspan="2">SPAN the width</td>
</tr>

</table>

Happy coding!

Leave a Comment

You must be logged in to post a comment.