表格元素没有延伸到 100%

Question

我一直试图让一个元素延伸到整个表格的长度，问题是这个元素的边缘总是留有一定的空间。

所以我一直在尝试将处理“最近的帖子”的元素一直延伸到边缘，我已经搞砸了几个小时试图改变显示和改变它的格式。

注意：由于相关网站上的混乱，我花时间将所有问题和解决方案打包到一个 JSFiddle 中......这应该会更容易让任何人都了解解决方案。

JSFiddle：https://jsfiddle.net/zm7bpr8p/2/

<table width="1000" border="1">
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>HEAD1</th>
<th>HEAD2</th>
<th>Comments</th>
</tr>
</thead>
<tr>
<td>Test1</td>
<td>Test2</td>
<td class="DR1">DISABLED</td>
<td class="DR2">DISABLED2</td>
<td>Comments</td>
</tr>
</table>

Answer 1

您的表格列有问题。

您的第一行有 5 个单元格，但其他只有 3 个（“.threads”和“.posts”不可见）。

将这两个单元格也隐藏在您的 th 中并解决问题。

变换：

td.threads, td.posts {
    display: none;
    padding: 0px !important;
}

收件人：

td.threads, td.posts, th.threads, th.posts {
    display: none;
    padding: 0px !important;
}

Answer 2

在您的表格的“线程”中，仍有五列“线程”和“帖子”仍然可见。似乎你错过了添加这个 CSS 样式。

/*Add this CSS style*/

.list >thead .threads, .list >thead .posts {
   display: none;
}

或者您可以隐藏所有“主题”和“帖子”列。

/*Add this CSS style*/
.list .threads, .list .posts {
   display: none;
}

希望这可以帮助你；）