CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
Mooseman
Mooseman

Reputation: 18891

Prevent a hidden tr from breaking the td widths

I am collapsing table rows and using jQuery to toggle them. However, when the hidden rows are shown, the width of the td elements in the first tr are recalculated. This is exhibited on my example:

$("tr:first").click(function(){
    $(this).next('tr').toggle();
});
tr{
    display: none;
}
tr:first-of-type{
    display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
    <tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
    <tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>

(Fiddle if preferred: http://jsfiddle.net/8u070tkf/)

How can I force the flow of the hidden row, but still toggle the visibility of the second tr?

Upvotes: 0

Views: 149

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106038

Not really an answer, but a few hints eventually.

you may relay on colgroup and min-width , unfortunately, display:none; hides width of content.

table-layout and width on table is something to look at too.

http://jsfiddle.net/8u070tkf/2/

$("tr:first").click(function(){
    $(this).next('tr').toggle();
});
tr{
    display: none;
}
tr:first-of-type{
    display: table-row;
}
col {
    min-width:2.2em;
}
td {
    background:yellow
}
<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<table>
    <colgroup><col/><col/> <col/><col/><col/> <col/><col/> <col/></colgroup>
    <tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
    <tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You would have better to toggle a class and set visibility CSS property:

$("tr:first").click(function(){
    $(this).next('tr').toggleClass('shown');
});

CSS:

tr:not(:first-of-type):not(.shown){
    visibility: hidden;
}

-DEMO-

Upvotes: 1

Related Questions