使表格行的最后一个单元格吃掉所有的空白答案

【问题标题】：Make the last cell of a table row eat all the white space使表格行的最后一个单元格吃掉所有的空白
【发布时间】：2018-11-21 01:17:08
【问题描述】：

当您将表格设为 100% 宽时，默认行为是按比例分配每个单元格的宽度，以便文本较多的单元格较宽，而文本较少的单元格较窄。

我希望我的表格填满屏幕的宽度，但其中的单元格应该向左对齐，就好像我没有指定表格宽度一样。换句话说：

如何在表格单元格右侧获得漂亮的空白空间，同时保持整个表格 100% 宽？

【问题讨论】：

标签： css css-tables

【解决方案1】：

这个 css 应该照顾它：

th:last-child, td:last-child {width:100%;}

但是，这会尝试将所有其他单元格向左挤压。因此，您可能希望在列标题中添加一致的高度：

thead {white-space:nowrap;}

【讨论】：

【解决方案2】：

尝试使用以下 css 和 HTML。 DEMO

CSS

table { 
    width:100%; 
    border-collapse: collapse;
    color: #4D4D4D;
    font:12px/17px Tahoma, Arial, Helvetica, serif; 
    margin-bottom:17px;
}
th { 
    background: #F9D7AB; 
    color: 4D4D4D; 
    font-size: 13px;
}
td { 
    background: #F8E5C3; 
    color: 4D4D4D; 
    font-size: 13px;
}

td, th { 
    padding: 8px; 
    border-bottom:1px solid #fff;
    text-align: left; 
}

【讨论】：