Valkyrurr Valkyrurr - 2 years ago 125
Javascript Question

tablesorter nested table th width


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


.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
is inside another
, width is dependent on the content of said
so I just placed some high number value as width... like
width: 1080px
and the INNER
works (occupies the whole OUTER
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 Source

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%;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download