使用Google Chrome/Webkit的表格單元格呈現錯誤

在以下代碼中，COL1A和COL3A與Chrome或Webkit的高度不是50％。它適用於IE7和Firefox。使用Google Chrome/Webkit的表格單元格呈現錯誤

<table border="1"> 
    <tr> 
    <td height="100%">COL 1A</td> 
    <td rowspan="2">COL 2</td> 
    <td>COL 3A</td> 
    <td rowspan="2"> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
    </td> 
    </tr> 
    <tr> 
    <td height="100%">COL 1B</td> 
    <td>COL 3B</td> 
    </tr> 
</table>

演示： http://dl.dropbox.com/u/255810/Jalios/Demo/TableChrome/table2.html

我試着設置不同的高度（在TR或TD）。我也試圖設置一個填充或邊距的圖像...但沒有任何工作。

這是Chrome的bug嗎？有沒有轉身或竅門？

來源

2009-11-10 Jean-Philippe Encausse

來管理內部表邊框爲響應回答下面你建議你會用Javascript修復這些。你會分享你如何在答案中做到這一點？請？像我這樣的其他人在試圖解決類似問題的同時也發現了這個問題。 – pjmorse 2011-05-03 20:28:16

似乎是webkit中的一個問題。我在Chrome和Safari中遇到同樣的問題。當中央有一些特定高度的行除外時，會出現這種情況。如果還有另一列具有較高的行跨度，則最後一個將被放大。沒有出現水平方向的這個問題。

你在的cols 1和3 使用單個細胞內的另一個表，避免行跨度

<table border="1"> 
<tr><td><table height=100%><tr><td height="100%">COL 1A</td></tr> 
       <tr><td height="100%">COL 1B</td></tr> 
     </table></td> 
<td><td>COL 2</td> 
<td>COL 3A</td> 
<td> 
    COL 4<br/> 
    COL 4<br/> 
    COL 4<br/> 
...

另外，你必須使用CSS

來源

2011-04-28 05:55:40 bitluni

對於td的height屬性不是嚴格定義的一部分，只有在過渡，也許WebKit的沒有實現它。嘗試使用CSS。

編輯：沒有運氣與CSS，無論。也許你必須每行使用一行，那麼你可以使用正確的rowspan屬性來生成高度爲50％的單元格。

來源

2009-11-10 10:01:38 Pascal

謝謝，COL4僅用於演示目的，實際上我有一個COL4中的複合信息，我不能分割 – 2009-11-10 12:25:53

然後，您可能不得不放棄'table'方法並使用（浮動）'div'秒。 – Pascal 2009-11-10 22:11:29

嗯，我不能，我必須使用表（通常我不使用DIV），但在這種情況下，我必須使用表來呈現我的動態FlowChart已經很好地工作。我將使用幾行JavaScript來修復Webkit :( – 2009-11-12 12:50:03

使用Google Chrome/Webkit的表格單元格呈現錯誤

回答

相關問題