css - 让表格行的最后一个单元格吃掉所有的空白

Question

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

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

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

Answer 1

这个CSS应该照顾它：

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

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

thead {white-space:nowrap;}

Answer 2

尝试使用以下 css 和 HTML。演示

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; 
}