2012-10-12 63 views
1

a table with much rows and cols merged爲什麼這張桌子看起來不整齊?

我希望基本單元的邊長爲20px。然後,我希望「合併單元格」(使用rowspan或colspan> 1)具有與它們覆蓋的基本單元格大小匹配的大小。

爲了實現這個我手動設置這些合併單元格的寬度。但在某些配置中,它的行爲很奇怪,如上圖所示。

藍色正方形覆蓋2x2個單元格,大小正確。但綠色廣場(和所有其他大型廣場)爲5x2,並且應該與其鄰居108px一樣大。

爲什麼鉻會丟棄我強制的尺寸? (沒有測試其他瀏覽器)

,你會發現這裏的jsfiddle:http://jsfiddle.net/kjshk/

的HTML如下:

<table> 
    <tbody> 
     <tr> 
      <td ></td> 
      <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td> 
     </tr> 
     <tr> 
      <td colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td> 
      <td ></td> 
      <td ></td> 
     </tr> 
     <tr> 
      <td ></td> 
      <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td> 
      <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td> 
     </tr> 
     <tr> 
      <td ></td> 
     </tr> 
     <tr> 
      <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td> 
      <td colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td> 
     </tr> 
    </tbody> 
</table>​ 

編輯: 我更新了的jsfiddle它應該看起來如何,但是增加了一個正確尺寸的行 http://jsfiddle.net/kjshk/11/


edit²:我無法真正改變HTML結構,因爲它是動態生成的(實際上有一個合併單元的腳本)。所以我可以採取行動的是風格。

+1

因爲你用colspan和rowspan做了瘋狂的事情。通過HTML 5 [驗證器](http://validator.w3.org)運行它,以獲得令人興奮的錯誤,例如*由tbody元素建立的行組的行6沒有單元格開始。* – Quentin

+1

請喜歡你崇拜的任何神像,停止使用表格進行佈局!這是2012年的大聲哭泣! – Jim

+0

http://www.csszengarden.com/ –

回答

0

如果更改百分比:這有幫助嗎?

<table 
    <tbody> 
     <tr> 
      <td ></td> 
      <td colspan="9" rowspan="1" style="width: 90%; height: 20px; "></td> 
     </tr> 
     <tr> 
      <td colspan="8" rowspan="1" style="width: 80%; height: 20px; "></td> 
      <td ></td> 
      <td ></td> 
     </tr> 
     <tr> 
      <td ></td> 
      <td colspan="7" rowspan="2" style="width: 70%; height: 42px; "></td> 
      <td colspan="2" rowspan="2" style="width: 20%; height: 42px; background-color:blue "></td> 
     </tr> 
     <tr> 
      <td ></td> 
     </tr> 
     <tr> 
      <td colspan="5" rowspan="2" style="width: 50%; height: 42px; "></td> 
      <td colspan="5" rowspan="2" style="width: 50%; height: 42px; background-color:green "></td> 
     </tr> 
     <tr></tr> 
    </tbody> 
</table> 

how it should look: 
<table> 
    <tbody> 
     <tr> 
      <td ></td> 
      <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td> 
     </tr> 
     <tr> 
      <td colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td> 
      <td ></td> 
      <td ></td> 
     </tr> 
     <tr> 
      <td ></td> 
      <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td> 
      <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td> 
     </tr> 
     <tr> 
      <td ></td> 
     </tr> 
     <tr> 
      <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td> 
      <td colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td> 
     </tr> 
     <tr></tr> 
     <tr> 
      <td ></td> 
      <td ></td> 
      <td ></td> 
      <td ></td> 
      <td ></td> 
      <td ></td> 
      <td ></td> 
      <td ></td> 
      <td ></td> 
      <td ></td> 
     </tr> 
    </tbody> 
</table> 
+0

您是否考慮了最近的我錯過了? (我編輯了帖子並將其刪除)。但這不是我所期望的。最後一行(與綠色方塊)的單元格應該具有相同的寬度 – BiAiB

+0

相同的寬度意味着什麼?行的2個TD應該有相同的寬度?或者它應該與上面的藍色相同? – RMN

+0

我用第二個jsFiddle更新了我的帖子,希望這會有所幫助 – BiAiB

0

表格單元格中的寬度始終被解釋爲準則而不是規則。 table-layout:fixed執行規則。

<table style="table-layout:fixed;"> 
    <colgroup> 
     <col style="width: 20px" span="10" /> 
    </colgroup> 
    <tbody> 
     ... 
    </tbody> 
</table> 
+0

我會在稍後看看你的解決方案,我現在得走了,謝謝 – BiAiB

相關問題