如何使固定大小的表格單元格與其內容無關

我有一個表格，其中包含動態內容，因此每行的高度都不相同 - 我想要的是固定表格的高度，而不考慮內容。內容可以是任何長度，也可以有圖像。如何使固定大小的表格單元格與其內容無關

我試着在CSS如下：

table { 
    border-collapse: collapse; 
} 
table td { 
    border: 1px solid #ccc; 
    padding: 4px; 
} 
table td:nth-child(2n+2) { 
    width: 200px; 
} 
table td:last-child { 
    width: 100px; 
} 
table tr { 
    height: 80px; 
    display: block; 
    overflow: auto; 
    background-color: red; 
    border: 2px solid #ccc; 
} 

<table> 
    <tr> 
    <td>content1</td> 
    <td>content 2</td> 
    <td>content 3</td> 
    </tr> 
    <tr> 
    <td>content1</td> 
    <td>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</td> 
    <td></td> 
    </tr> 
    <tr> 
    <td>content1</td> 
    <td></td> 
    <td>content 3</td> 
    </tr> 
</table>

它工作得很好，但是當有任何細胞的任何內容，或者如果含量降低細胞時，它崩潰。這裏是fiddle

來源

2012-06-11 Bipin Chandra Tripathi

我沒有看到這個「崩潰」：http://jsfiddle.net/YD9Gg/4/ - 即使沒有任何細胞有任何內容。但它在不同的瀏覽器上有所不同。在IE上，寬度崩潰了，但不是高度。在Firefox和Chrome上，無論是否有內容，寬度和高度都是相同的。 –

http://jsfiddle.net/YD9Gg/5/這是你想要的東西嗎？垂直拉伸立柱？ –

@Sófka我想要固定尺寸（高度和寬度）和溢出內容的每一行不顯示或顯示滾動和 –

您可以使用類似（example）：

table td 
{ 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
    overflow: auto; 
}

與支持inline-block瀏覽器。（雖然我不確定這是否是一個好的解決方案。）

來源

2012-06-11 14:33:08 Qtax

如何使固定大小的表格單元格與其內容無關

回答

相關問題