在 div 内展开 table 背景色

Question

我在 div 里面有一个 table。
我的代码：https://jsfiddle.net/2cg29xLc/

HTML

<div>
<table>
    <thead>
        <!-- Example with only 2 columns -->
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>foo</td>
            <td>this</td>
        </tr>
        <tr>
            <td>bar</td>
            <td>that</td>
        </tr>
    </tbody>
</table>

CSS

div {
    width: 99%;
}
table {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
thead tr:nth-child(odd) {
    background-color: #FFC0CB;
}
tbody tr:nth-child(even) {
    background-color: #FFC0CB;
}

我的情况：
我想扩展 table 的背景颜色和边框以匹配 div 的宽度。
看起来像这样： https://jsfiddle.net/2cg29xLc/7/

我的头痛：
我无法设置 table 的宽度：99%
因为设计要求列有自己的宽度，所有列都在左边。

我遇到了这个Make background for table rows extend past the bounds of the table
但我无法让它与我的代码一起使用，可能是因为我不使用 bootstrap.

非常感谢任何帮助。

Answer 1

据我了解，您希望最后一列填满 table 的剩余 space，我说得对吗？在这种情况下，您可以定位最后一列并使用以下代码对其应用 100% 宽度：

th:last-child{
    width:100%;
    text-align:left;
}

这里是 fiddle：https://jsfiddle.net/xundqddc/1/

在 div 内展开 table 背景色

Expand table background-color inside div

html

css

html-table