使用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>