在 div 内展开表格背景颜色答案

【问题标题】：Expand table background-color inside div在 div 内展开表格背景颜色
【发布时间】：2015-07-04 17:35:55
【问题描述】：

我在 div 中有一个表格。
我的代码：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;
}

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

我的头疼：
我无法设置表格的宽度：99%
因为设计要求列有自己的宽度，并且所有列都保持在左侧。

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

非常感谢任何帮助。

【问题讨论】：

在table{...} CSS 规则中定义表格的宽度。目前它没有设置，所以默认为100%
只需将“理想”小提琴示例中的 css 应用到您自己的小提琴中即可。不知道为什么这对您不起作用？
这样吗？ jsfiddle.net/y6pfowjf
为什么不能设置表格宽度？
谷歌“CSS Flexbox”作为一种可能的替代方案（尽管这可能需要您在某些维度上设置表格宽度）

标签： css html html-table

【解决方案1】：

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

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

这是小提琴：https://jsfiddle.net/xundqddc/1/

【讨论】：

谢谢，它有效。现在我觉得很愚蠢，很简单：D