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与外表一起正常工作，我输出的每个单元格的宽度就是证明。但当<th>位于另一个<table>内时，宽度取决于所述tag的内容，所以我只是将一些高数值作为宽度放置......如width: 1080px和INNER <th>有效（占据其中包含的整个OU <td>。

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

显示：所述<th>的阻止也似乎不起作用。

Answer 1

问题是嵌套表“调整”自身以匹配其内容的宽度。因此，如果您将嵌套表格宽度设置为100%，它应该按预期工作（demo）

.tablesorter th {
  width: 20%;
}

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

tablesorter嵌套表的宽度

1 个答案: