I have a table that uses jQuery to expand/collapse rows. I based it on a site which had a sample on how to do it.
It works fine for that expand / collapse. Outside of WordPress, in a normal website, the expanded table in the row fills the entire width of the parent table. However, under WordPress it’s only 1/2 (50%) of the parent table.
I noticed in the browser debugger the jQuery toggle is changing the <tr class='childTableRow'>
to/from: <tr class='childTableRow' style='display: block;'>
and <tr class='childTableRow' style='display: none;'>
In the browser debugger, if I changed the style from display: block
to display: table-row
it correct spans 100% across the parent table. However, I can’t stop jQuery from using display:block
.
I couldn’t get anything else, including width: 100%
, to make it fit the parent table width other than (again in the browser debugger) getting rid of both the class='childTableRow'
and the style='display: block'
. At that point expand / collapse still works but jQuery set the style to empty string or none
.
Does someone know a way to get this to work properly by just looking at the subset of items below?
The Table:
<table width='100%' class='mytable'>
<tr><th colspan='2' align='center' class='mytitle expandChildTable'>Title</th></tr>
<tr class='childTableRow'><td colspan='2'><table width='100%' class='mytable'>
<tr>
<th align='center' colspan='1' class='mysubtitle'>Left Col Title</th><th align='center' colspan='1' class='mysubtitle'>Right Col Title</th></tr>
<tr><td title='Whatever' align='center' colspan='1' class='mylinks'><a href="/xxxx.htm">Download Me</a></td><td title='Download Link' align='center' colspan='1' class='mylinks'><a href="/xxxxx.htm">Download Me Too</a></td></tr>
... repeat as many rows as may be needed ...
<tr><td colspan=2 class='myfooter'>Footer Item</td></tr>
</table></td></tr>
</table><br />
The CSS is from wordpress theme (lots of stuff) + these specific for the table:
table.mytable
{
color:#555555;
background-color:#fff;
border-width:2px;
border-style:solid;
border-collapse:collapse;
border-color:#777777;
table-layout:fixed
}
th.mytitle
{
color:#ffffff;
background-color:#888888;
padding:5px;
border-width:1px;
border-bottom:2px;
border-style:solid;
border-color:#777777;
text-align: center;
}
th.mysubtitle
{
background-color:#999999;
padding:2px;
border-width:1px;
border-style:solid;
border-color:#777777;
text-align: center;
}
td.myfooter
{
background-color:#AAAAAA;
padding-left:15px;
border-top:1px;
border-top-style:solid;
border-color:#777777;
}
td.mylinks
{
padding:2px;
border-top:0px;
border-bottom:0px;
border-left:1px;
border-right:1px;
border-style:solid;
border-color:#777777;
}
.expandChildTable:before {
content: "+";
font-size: larger;
font-weight: bold;
display: inline-block;
position: absolute;
left: 30px;
cursor: pointer;
}
.expandChildTable.selected:before {
content: "-";
}
.childTableRow {
display: none;
}
The jQuery used is:
<script src="/include/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.expandChildTable').on('click', function() {
$(this).toggleClass('selected').closest('tr').next().toggle();
})
});
</script>