就像標題所說的那樣，我想要一個HTML表格，它允許其行和列的大小獨立於單元格內容。如果行數不夠高或者列不夠寬以顯示所有單元格的內容，則該內容應該簡單地消失在單元格後面。帶有可以獨立於單元格內容大小的行和列的HTML表格
我想出了以下解決方案，其在鉻工作正常（17）和歌劇（11.61），野生（5），IE（9），但不是在Firefox：
th, td {
position: relative;
overflow: hidden;
}
td > span {
position: absolute;
top: 0px;
}
th > div {
position: relative;
}
（設計是這樣每個td只包含一個跨度和任何「真實」內容，就像文本在td內的跨度內一樣，而且每一行都有一個初始th，並且有一個只包含th的標題行，並且所有這些包含一個div。通過在th內設置DIV的明確高度和寬度，我可以設置行的寬度和高度。）
以下HTML說明了該示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
table {
border-width: 1px;
border-style: none none solid solid;
}
th, td {
border-width: 1px;
border-style: solid solid none none;
}
th > div {
height: 18px;
width: 50px;
}
th, td {
overflow: hidden;
position: relative;
}
td > span {
position: absolute;
top:0px;
}
th > div {
position: relative;
}
</style>
</head>
<body>
<table
cellspacing="0"
cellpadding="0"
style="font-size: 10pt"
>
<thead>
<tr>
<th><div>Header0</div></th>
<th><div>Header1</div></th>
<th><div style="width:25px">Header2</div></th>
</tr>
</thead>
<tbody>
<tr>
<th><div>Header1</div></th>
<td
style="
vertical-align: bottom
"
>
<span style="
font-size:6pt;
background-color: red;
">A</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">B</span>
</td>
</tr>
<tr>
<th><div>Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">C</span>
</td>
<td>
<span style="
font-size:30pt;
background-color: green;
">D</span>
</td>
</tr>
<tr>
<th><div style="height:10px">Header2</div></th>
<td>
<span style="
font-size:30pt;
background-color: yellow;
right: 0px
">E</span>
</td>
<td>
<span style="
font-size:6pt;
background-color: blue;
">F</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
這對鉻和歌劇，這兩個位置跨度相對於td（這就是爲什麼我給他們的立場：相對）罰款。但是，在firefox中，位置：td的相對位置被完全忽略，跨度相對於表格行上具有絕對或相對位置的第一個祖先而定位。因此，只有上述規則，跨度的頂部粘到文檔主體的頂部，如果我補充一下：
table {
position:relative
}
跨度的頂部都粘在表的頂部。但是一個位置：適用於tr或td的位置似乎完全被忽略了。
任何洞察到工作解決方案將不勝感激。
UPDATE Firefox根本不支持位置：表格單元格上的相對位置。見https://bugzilla.mozilla.org/show_bug.cgi?id=35168#c11。國際海事組織，這是一個錯誤。儘管有人認爲「標準」說這個設置的行爲是未定義的，但其他瀏覽器似乎沒有什麼問題以合理和有用的方式實現這一點，所以從我的角度來看，似乎沒有什麼好理由爲什麼firefox想要忽視這種事實上的行爲。
經過一番實驗後，我想出了兩種替代解決方案 - 它們都不是完美的 - 對於面臨同樣問題的其他人可能有用也可能沒有用。
1）使用位置：靜態表格單元格幾乎可以解決firefox中的問題（不會改變所有其他瀏覽器中的行爲）。無論如何，如果你給位置：靜態表格單元格，當你在表格單元格上設置文本對齊方式時，會出現一個新問題。然而，在所有其他瀏覽器（它們在單元格內向右渲染跨度）中，這再次正常工作，firefox再次顯示不同的行爲，並顯示單元格以外的右側的範圍。
2）使用table-layout：固定在表格上，並將單元格內容直接放入單元格中（而不是單獨的跨度或div）。然後你可以用th元素的樣式明確地設置寬度和高度（注意，僅僅在th元素內設置div的寬度/高度是不夠的 - 你真的需要直接在th元素上做到這一點。 google文檔電子表格採用了這種方法，這種方法允許單元格的內容比單元格寬，但是不能使表格行的高度低於單元格的高度。
我得到你的問題的要點，但不是100％確定的細節，特別是關於'span'使用的部分。你在這個小提琴中沒有滿足你的哪些要求：http://jsfiddle.net/philipf/wa2vR/ – 2012-02-25 17:31:49
嗨，菲利普！謝謝回覆。看起來很有希望，但這需要我明確設置單元格內的DIV的高度（全部都是這樣，而不是僅設置TH內的DIV的明確高度和寬度）。如果我沒有在解決方案中設置TD內的DIV的高度和寬度，則行/列的大小仍會被單元格內容的大小覆蓋。 – 2012-02-25 18:41:26