tablesorter nested table th width

Question

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 <th> also won't seem to work.

Answer 1

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%;
}