使用HTML和CSS創建復雜的Excel之類的網格結構

Question

我試圖弄清楚如何使用Html和CSS創建類似於本文中圖像的網格布局。 我在項目中安裝了引導程序，但由於網格最多上升到12列，因此未將其用於網格系統。 在某些情況下，會有超過12列。

這是我創建以幫助我的CSS類：

.x-grid {
    width: 3000px;
}

.x-row {
    width: 100%;
}

.x-cell {
    float: left;
    border: 1px solid black;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.x-cell span {
    display: block;
}

請參閱此jsFiddle作為我的初次嘗試。

我似乎在在行內添加行以實現圖像外觀時遇到問題。 例如，在“主要項目”行中需要有三行，其主要行的高度除以3。然后在這些行中的每一行中有5行。.我就是無法得到它，也許是我的CSS類設置不正確，無法執行此類操作。

請注意，.ws-grid的寬度為3000px的原因是因為該數字將根據網格中需要多少列才能使內容良好顯示而動態變化。 是的，用戶將需要滾動。

Answer 1

嘗試使用此網站http://www.tablesgenerator.com/html_tables

我能夠在大約10分鍾內生成此文件。 然后，您可以根據自己的喜好繼續使其更具動態性。 但是至少結構在那里。

希望能幫助到你：

https://jsfiddle.net/jk4eg1z0/

隨附代碼：

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yzt1{background-color:#efefef;vertical-align:top}
.tg .tg-uhkr{background-color:#ffce93}
.tg .tg-i6eq{background-color:#ffccc9;vertical-align:top}
.tg .tg-nvd0{background-color:#f8a102;vertical-align:top}
.tg .tg-gr78{background-color:#ffce93;vertical-align:top}
.tg .tg-c57o{background-color:#ecf4ff;vertical-align:top}
.tg .tg-2s1i{background-color:#fd6864;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
      <tr>
        <th class="tg-uhkr" colspan="4">Primary Header</th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
        <th class="tg-gr78"></th>
      </tr>
      <tr>
        <td class="tg-c57o" rowspan="20">Primary Item 1</td>
        <td class="tg-c57o" colspan="3">Sub-Header 1</td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
        <td class="tg-c57o"></td>
      </tr>
      <tr>
        <td class="tg-c57o" colspan="6">Sub-Header 2</td>
        <td class="tg-c57o" colspan="4"></td>
        <td class="tg-c57o" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-i6eq" rowspan="6">Sub-item 1</td>
        <td class="tg-nvd0" colspan="2">Title 1</td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
      </tr>
      <tr>
        <td class="tg-2s1i" colspan="5">Title 2</td>
        <td class="tg-2s1i" colspan="4"></td>
        <td class="tg-2s1i" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2">Title 3</td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2" rowspan="2">Title 4</td>
        <td class="tg-yw4l" colspan="3"></td>
        <td class="tg-yzt1" colspan="4"></td>
        <td class="tg-yw4l" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yw4l" colspan="3"></td>
        <td class="tg-yw4l" colspan="4"></td>
        <td class="tg-yzt1" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2">Title 5</td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
      </tr>
      <tr>
        <td class="tg-i6eq" rowspan="6">Sub-item 1</td>
        <td class="tg-nvd0" colspan="2">Title 1</td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
      </tr>
      <tr>
        <td class="tg-2s1i" colspan="5">Title 2</td>
        <td class="tg-2s1i" colspan="4"></td>
        <td class="tg-2s1i" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2">Title 3</td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2" rowspan="2">Title 4</td>
        <td class="tg-yw4l" colspan="3"></td>
        <td class="tg-yzt1" colspan="4"></td>
        <td class="tg-yw4l" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yw4l" colspan="3"></td>
        <td class="tg-yw4l" colspan="4"></td>
        <td class="tg-yzt1" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2">Title 5</td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
      </tr>
      <tr>
        <td class="tg-i6eq" rowspan="6">Sub-item 1</td>
        <td class="tg-nvd0" colspan="2">Title 1</td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
        <td class="tg-nvd0"></td>
      </tr>
      <tr>
        <td class="tg-2s1i" colspan="5">Title 2</td>
        <td class="tg-2s1i" colspan="4"></td>
        <td class="tg-2s1i" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2">Title 3</td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2" rowspan="2">Title 4</td>
        <td class="tg-yw4l" colspan="3"></td>
        <td class="tg-yzt1" colspan="4"></td>
        <td class="tg-yw4l" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yw4l" colspan="3"></td>
        <td class="tg-yw4l" colspan="4"></td>
        <td class="tg-yzt1" colspan="4"></td>
      </tr>
      <tr>
        <td class="tg-yzt1" colspan="2">Title 5</td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
        <td class="tg-yzt1"></td>
      </tr>
    </table>

ps要創建合並的單元格，請使用網站上的合並單元格選項。

Answer 2

Bootstrap也可以做到

 <div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>