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

Question

当您制作100％宽的表格时，默认行为是按比例分配每个单元格的宽度，以使包含更多文本的单元格更宽，文字越窄越窄。

我想我的表格填充屏幕的宽度，但内部的单元格应该对齐左侧，就好像我没有指定表格宽度一样。换句话说：

我怎样才能像漂亮的白色空间，以我的表单元格的右边，同时保持整体台面100％宽？

Answer 1

这个CSS应该照顾它：

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

然而，那将尝试压扁所有向左其他细胞。因此，您可能需要在列标题中添加一致的高度：

thead {white-space:nowrap;} 

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