Valkyrurr Valkyrurr - 6 months ago 39
Javascript Question

tablesorter nested table th width

HTML:

<div class="container">
<table class="tablesorter">
<thead><th></th></thead>
<tbody>
<tr><td><table>
<thead><tr>
<th>some content that should inherit its parent tag's width</th>
</tr></thead>
</table></td></tr>
</tbody>
</table>
</div>


CSS:

.tablesorter th { width: 20%; }
.tablesorter table th { width: 100%; } //won't work
.tablesorter table th { width: 1080px } //works! for some absolute value


My css works fine with the outer table, as evidenced by the width per cell on my output. but when the
<th>
is inside another
<table>
, width is dependent on the content of said
tag
so I just placed some high number value as width... like
width: 1080px
and the INNER
<th>
works (occupies the whole OUTER
<td>
its contained in.

But isn't this semantically incorrect if I just stick with the 1080px or w/e solution? What am I missing here? I've searched thru chrome's dev console for hours and no avail.

display: block for the said also won't seem to work.

Answer

The problem is that the nested table "adjusts" itself to match the width of its content. So if you set the nested table width to 100%, it should work as expected (demo)

.tablesorter th {
  width: 20%;
}

.tablesorter table,
.tablesorter table th {
  width: 100%;
}