HTML表自動適用於某些列，爲他人

表格的寬度必須被定義爲0 - 瀏覽器應該計算根據列寬度的寬度（這是爲了適應列大小調整插件）。
某些列可能會收到固定寬度（例如50px）;
未收到固定寬度的列必須自動適應內容。

我已經創建了一個small example來說明問題 - 正如您可以看到第3列停留在寬度爲0，因此不可見。

編輯：如果「table-layout：fixed」被刪除。第三列出現，但固定寬度被忽略，所有列變成自動擬合。

HTML

<table> 
<tr> 
    <td class="cell header" id="header1">Header 1</td> 
    <td class="cell header" id="header2">Header 2</td> 
    <td class="cell header" id="header3">Header 3</td> 
</tr> 
<tr> 
    <td class="cell">Cell 1</td> 
    <td class="cell">Cell 2</td> 
    <td class="cell">Very looooong content</td> 
</tr> 
</table>

CSS

table { 
    table-layout: fixed; 
    width: 100%; 
    border: 1px solid #696969; 
} 

.cell { 
    color: #898989; 
    border: 1px solid #888; 
    padding: 2px; 
    overflow: hidden; 
} 

.header { 
    background-color: lightsteelblue; 
    color: black; 
} 

#header1, #header2 { 
    width: 50px; 
}

這甚至可能嗎？任何幫助，將不勝感激......

來源

2012-12-02 sangil

是否有一個原因，除去'寬：0;'或'與寬度交換它：汽車;'止跌沒有與你的列大小插件一起工作嗎？這些更改完全符合你在演示中需要的內容，但是我不確定插件。http://jsfiddle.net/HbARP/43/ – shshaw

這是不可能與表格的佈局：固定和0你的桌子上的寬度。

窗體W3 Spec section 17.5.2.1：

在固定表格佈局算法中，每個列的寬度是確定如下：

比「自動」，用於其他的值的列元素'width'屬性設置該列的寬度。

否則，第一行中'width'屬性值不是'auto'的單元格將確定該列的寬度。如果單元跨越多個列，則寬度將在列中分配。

任何剩餘的列等分剩餘的水平表空間（減去邊框或單元格間距）。

但是，當你做自動佈局（在第17.5.2.2描述）的寬度會被擺佈與您的內容工作，並在可能的情況只使用所提供的寬度。例如，如果每列的最小寬度總和超過表格的容器寬度，則所有內容都將被移動以適應獨立於您設置的寬度的程度。

還應該注意的是：

實現這個算法，以確定在「表格佈局」是「自動」的情況下表格的佈局
的UA不需要;他們可以使用任何其他算法，即使它導致不同的行爲。

所以看起來，答案是一個不幸的是囉嗦「不」 :(

來源

2013-10-11 15:25:44 betaorbust

HTML表自動適用於某些列，爲他人

回答

相關問題