HTML表格：保持列的寬度相同

我有一個包含多組列的表格。該表比我的頁面大，所以我有一個控件來顯示/隱藏這些組以適應頁面。初始表格看起來不錯：組內的所有列都大約相同。但是，當我隱藏一個組時，這些列不再是相同的寬度，而且看起來很糟糕。HTML表格：保持列的寬度相同

到目前爲止，該表看起來很好。點擊>>。「電子商務專業版」下的第一列比「電子商務專業版」下的其他專欄要寬得多，看起來很奇怪。點擊< <，這次「價值」下的第一列太寬。至少在Firefox上。

我試着使用

<colgroup><col /><col span="5" />...

，但沒有運氣。如果我將col設置爲style =「display：none」，那麼仍然會顯示一組列。

任何HTML/CSS提示，以保持與組寬度相同的列？

編輯：

2009-02-20 Julien

身份驗證對話框阻止我使用該站點。 – 2009-02-20 16:18:53

它只會阻止我看到一些圖像。 – 2009-02-20 16:35:04

這是一個錯誤的.htaccess，要求進行身份驗證以獲取/ sites下的圖像。我今晚會解決它。我仍在致力於構建網站。 – Julien 2009-02-20 22:28:18

176

如果在表格上設置樣式，則可以覆蓋瀏覽器的自動列大小調整。然後，瀏覽器將根據表格第一行中單元格的寬度設置列寬。將<thead>更改爲<caption>並將其中的<td>刪除，然後爲<tbody>中的單元格設置固定寬度。

2009-02-20 22:06:16

+1：這個答案在五分鐘前幫助我解決了一個問題。 – banjollity 2009-03-09 11:53:39

在你因爲您只顯示3列：

Name Value  Business 
    or 
Name Business Ecommerce Pro

爲什麼不把全部3個設置爲33.3％的寬度。因爲一次只顯示3個，所以瀏覽器應該呈現它們全部相似的寬度。

2009-02-20 17:58:17 scunliffe

當我隱藏/顯示不同的列時，單元格的數量可能會增加 – Julien 2009-03-14 06:23:42

那麼，你爲什麼不擺脫邊欄和擠壓桌子，所以它沒有顯示/隱藏效果？我現在看起來很奇怪。表格太強大了。
否則我認爲scunliffe的建議應該這樣做。或者，如果您願意，您可以設置表格的確切寬度，併爲表格單元格設置百分比或像素寬度。

2009-02-21 19:54:04 Adriana

給這個樣式td：width：1％;

2015-02-11 20:07:13

回答