使表格行的最後一個單元格吃掉所有的空白區域

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