I have a table, when clicking a TR, it slides open to show more data. problem is the column width "stutters" slightly.
One solution I found was to set widths to each column, but I want the table to be fluid, and I can't set a width to all columns.
HTML:
Click on a row for more info:
<table>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td></tr>
</table>
CSS:
table{ width: 624px; border-collapse: collapse;}
tr {border: 1px solid #AEAEAE;}
JQuery:
$(function() {
$("td[colspan=3]").find("p").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 ) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
see this fiddle: http://jsfiddle.net/jcghqfau/1/
I've tried the solution suggested in this question, but it doesn't help the column widths.
setting table-layout:fixed; solves the jumping but prevents me from using fluid css.
Note: i need a cross browsers solution, including IE8 and up.
