2013-03-12 93 views
3

我發現這個話題,我的是相關但不一樣的:IE9表格的佈局固定合併單元格不尊重

Table rendering with cols and colspan on tds in IE9

我遇到的問題是,第二列跨度= 2在我的表是不是被IE9閱讀,有趣的是,它可以在IE7和IE8中找到,但不能在IE9中找到。也許我已經做了一些完全錯誤的所以在這裏,它是:

HTML:

<table id="test"> 
    <tbody> 
     <tr> 
      <td>COLSPAN = 1</td> 
      <td colspan="2">COLSPAN = 2</td> 
      <td>COLSPAN = 1</td> 
      <td colspan="2">COLSPAN = 2</td> 
     </tr> 
    </tbody> 
</table> 

CSS:

#test { 
    width: 100%; 
    border-spacing: 20px; 
    border-collapse: separate; 
    table-layout: fixed; 
} 

#test td { 
    position: relative; 
    background-color: #cccccc; 
    box-shadow: 3px 3px 2px rgba(0,0,0,0.5); 
    padding: 10px; 
} 

的jsfiddle:http://jsfiddle.net/DUCPp/1/

什麼是應該發生: enter image description here

什麼IE9 g ives me: enter image description here

我確信這是一個IE9的錯誤,但我一直沒有能夠在谷歌上找到它(也許我沒有搜索正確的關鍵字?)。任何解決方案或錯誤報告的鏈接將不勝感激!

更新: 我在第二個colspan = 2列後添加了一個額外的列,它將正確呈現。我推斷,如果連續最後一列的colspan> 1,那麼它將只呈現爲colspan = 1。

有關修復的任何想法?我現在幾乎肯定這是一個IE9錯誤< _ <

+0

請確保您正在運行IE9模式:x因爲它在IE7和IE8中正常工作... – Populus 2013-03-12 19:36:04

+0

您的修改是爲我添加額外的列。 – 2013-12-09 16:37:55

回答

0

您似乎沒有爲列定義任何固定寬度。你應該使用類似這樣的<tbody>前:

<col span="6" style="width:16%;" /> 
+0

我已經嘗試過定義列,但無濟於事......查看我上面發佈的解決方案是否正常:/ – Populus 2013-03-12 19:30:16

3

嘿... ... IE9

發現了一個 「修復」 ...的想法來自:Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

基本上我不得不在它添加一個空行空單元格的正確#:

<table id="test"> 
    <tbody> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>COLSPAN = 1</td> 
      <td colspan="2">COLSPAN = 2</td> 
      <td>COLSPAN = 1</td> 
      <td colspan="2">COLSPAN = 2</td> 
     </tr> 
    </tbody> 
</table> 

不漂亮......我需要去除的細胞填充,以便它不顯示。唉...

的jsfiddle:http://jsfiddle.net/DUCPp/5/

+0

您可以離開填充,然後選擇第一個'tr'並刪除它們的填充:#test tr:first-child td {padding:0}' – 2013-03-12 19:30:29

+0

我認爲這是IE中的一個錯誤(你知道些什麼)。這個小提琴也失敗了http://jsfiddle.net/DUCPp/1/確實很奇怪的行爲。 – Bart 2013-03-12 19:35:02

1

你想要做的頭一組列的寬度,通過TH,因爲這是瀏覽器將使用什麼來確定表的後續行寬度和列什麼。

看一看下面的例子:

<table> 
    <thead> 
     <tr style="height: 0px;"> 
      <th style="width: 110px; height:0px;"></th> 
      <th style="width: 160px; height: 0px;"></th> 
      <th style="width: 210px; height: 0px;"></th> 
      <th style="width: 110px; height: 0px;"></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td colspan="3">Hello</td> 
      <td>There</td> 
     </tr> 
    </tbody> 
</table>