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

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