使html表格使用100％的可用寬度

我有一個奇怪的問題，我實際上很慚愧地承認。看到整個事情在這裏： http://jsfiddle.net/Sorcy/ng2by/1/使html表格使用100％的可用寬度

我的問題是：第二個（很小）表應該實際上拉伸容器的整個寬度。當我用螢火蟲看它時（因此藍色框在右邊，實際上是表格的背景顏色），但是行本身只能伸展到儘可能容納內容。

既然我不想在桌子旁邊放一個大藍框，我該如何讓這個東西拉伸整個寬度？沒有任何設置寬度的tablerows給我帶來了什麼，因爲我不能預先知道我的表有多少列，設置單元格的寬度也是不可能的。

到目前爲止，唯一的解決方案是編寫一個小型Javascript代碼，通過表格計算每列的數量並設置每個代碼的寬度，但當然我希望純CSS解決方案更好。

編輯：

按照要求，它應該是怎樣看的圖像： How the tables are supposed to look

2011-09-02 Sorcy

我建議你編輯問題並添加你未能完成的設計的屏幕截圖。 –

@Sourcy - 這是一個相當簡單的設計。這些代碼正是我在更新＃2中提出的。 –

我認爲主要的問題是這樣的：

table { 
    display: block; 
}

如果更改display屬性對於表格，基本上要求瀏覽器忽略它是一個表格，並將其作爲常規元素處理，從而導致不可預知的怪癖。

我不知道你要完成的，但它可能是你真的想這樣：

table { 
    border-collapse: collapse; 
}

這個屬性使得它更容易達到一定的視覺設計。

更新＃1：表的最後一行之後，一條深色的線條可以用這個簡單的風格來完成：

table { 
    /*background-color: #001F66;*/ 
    border-bottom: 1px solid #001F66; 
}

更新＃2：爲了得到細胞後，暗線與此

table tr:last-child td { border-bottom: none; }

...：最後一排的替換此

table tr:last-child td { border-bottom: 1px solid #001F66; }

2011-09-02 06:56:05

+1用於識別表格樣式中的奇怪顯示屬性。 –

我使用display：block for是表格最後一行之後的黑線。如果我不使用display：block，padding-bottom：1px將永遠不會工作，所以背景顏色永遠不會出現在表格下方，因此我沒有最後一個（不間斷）行。是的，我知道，但那是設計師給你的。 – Sorcy

@Sorcy看到我的更新。 –

回答