複雜表rowspan和colspan

Question

可以通過適當使用rowspan和colspan在Excel表格中重現Excel中合併和非合併單元格的任意排列方式，還是存在限制？我有seen一些相當複雜的安排在這裏解決，所以我很有希望。

我有一個8行5列的網格合併成16個不同的單元格，代表標題爲A-H的8個部分的每一個的標題和內容。

這裏是我要達成的安排，因爲它看起來在Excel（單元格B2：F9）：

這裏是我概念化的HTML跨度：

以下標記是我最好的近似值：請注意，紅色div用於表示節的內容的任意大小。

JSFiddle

<style> 
    table { 
     border-spacing: 0; 
     width: 1500px; 
    } 

     table > tbody > tr > td { 
      border: 1px solid black; 
      vertical-align: top; 
      text-align: center; 
     } 

      table > tbody > tr > td > div { 
       margin: 0 auto; 
       border: 1px red solid; 
      } 
</style> 
<table> 
    <tr id="Row1"> 
     <td>A 
     </td> 
     <td colspan="2">B 
     </td> 
     <td colspan="2">C 
     </td> 
    </tr> 
    <tr id="Row2"> 
     <td> 
      <div style="width: 340px; height: 100px;" /> 
     </td> 
     <td colspan="2" rowspan="3"> 
      <div style="width: 450px; height: 200px" /> 
     </td> 
     <td colspan="2" rowspan="5"> 
      <div style="width: 400px; height: 100px" /> 
     </td> 
    </tr> 
    <tr id="Row3"> 
     <td>D 
     </td> 
    </tr> 
    <tr id="Row4"> 
     <td rowspan="5"> 
      <div style="width: 340px; height: 100px;" /> 
     </td> 
    </tr> 
    <tr id="Row5"> 
     <td colspan="2">E 
     </td> 
    </tr> 
    <tr id="Row6"> 
     <td colspan="2"> 
      <div style="width: 450px; height: 200px;" /> 
     </td> 
    </tr> 
    <tr id="Row7"> 
     <td>F 
     </td> 
     <td colspan="2">G 
     </td> 
     <td>H 
     </td> 
    </tr> 
    <tr id="Row8"> 
     <td> 
      <div style="width: 330px; height: 100px" /> 
     </td> 
     <td valign="top" colspan="2"> 
      <div style="width: 200px; height: 100px" /> 
     </td> 
     <td valign="top"> 
      <div style="width: 200px; height: 100px" /> 
     </td> 
    </tr> 
</table> 

它生成這樣的：

我有兩個問題，我的解決辦法：

• 頭 'd'（第3行）的底部邊緣似乎被鏈接到 頭部'E'（第5行）的頂部邊緣，並且頭部'D'太高。相反，我認爲'A'下面的內容單元應該縮小以符合div，並將標題'D'繪製出來。
• 我無法解釋爲什麼超過一半的細胞（B，C，E，F，H）對於它們的 內容來說太寬了。桌子比我需要的要寬得多 - 我希望有更多的單元能像G那樣適合他們的內容。

不同瀏覽器的渲染是一致的。我是否犯過我的跨度錯誤，或者由於某種原因無法實現？

Answer 1

現在，您正在讓瀏覽器解釋表格中每個單元格的寬度和高度。您需要設置每個單元格的寬度和高度屬性來解決您的問題。

<table> 
     <tr id="Row1"> 
      <td width="340">A 
      </td> 
      <td colspan="2" width="450">B 
      </td> 
      <td colspan="2" width="450">C 
      </td> 
     </tr> 
     <tr id="Row2"> 
      <td width="340" height="100"> 
       <div style="width: 340px; height: 100px;" /> 
      </td> 
      <td colspan="2" rowspan="3" width="450"> 
       <div style="width: 450px; height: 200px" /> 
      </td> 
      <td colspan="2" rowspan="5" width="400"> 
       <div style="width: 400px; height: 100px" /> 
      </td> 
     </tr> 
     <tr id="Row3"> 
      <td>D 
      </td> 
     </tr> 
     <tr id="Row4"> 
      <td rowspan="5" width="340"> 
       <div style="width: 340px; height: 100px;" /> 
      </td> 
     </tr> 
     <tr id="Row5"> 
      <td colspan="2" width="450">E 
      </td> 
     </tr> 
     <tr id="Row6"> 
      <td colspan="2" width="450"> 
       <div style="width: 450px; height: 200px;" /> 
      </td> 
     </tr> 
     <tr id="Row7"> 
      <td>F 
      </td> 
      <td colspan="2">G 
      </td> 
      <td>H 
      </td> 
     </tr> 
     <tr id="Row8"> 
      <td width="350"> 
       <div style="width: 350px; height: 100px" /> 
      </td> 
      <td valign="top" colspan="2" width="200"> 
       <div style="width: 200px; height: 100px" /> 
      </td> 
      <td valign="top" width="300"> 
       <div style="width: 300px; height: 100px" /> 
      </td> 
     </tr> 
    </table> 

查看更新fiddle。