table排序器嵌套了第 table 个宽度

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

我的 css 与外部 table 一起工作正常，我的输出中每个单元格的宽度证明了这一点。但是当 <th> 位于另一个 <table> 内时，宽度取决于所述 tag 的内容，所以我只是放置了一些高数值作为宽度...例如 width: 1080px 和INNER <th> 作品（占据整个 OUTER <td> 它包含在.

但是如果我坚持使用 1080px 或 w/e 解决方案，这在语义上不是不正确吗？我在这里错过了什么？我已经通过 chrome 的开发控制台搜索了几个小时，但无济于事。

display: block for the said <th> 似乎也不起作用。

Answer 1

问题是嵌套的 table "adjusts" 本身要匹配其内容的宽度。因此，如果您将嵌套 table 宽度设置为 100%，它应该会按预期工作 (demo)

.tablesorter th {
  width: 20%;
}

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

table排序器嵌套了第 table 个宽度

tablesorter nested table th width

html

css

jquery

tablesorter