Creating a complex excel like grid structure with HTML and CSS

Question

I am trying to figure out how to create a grid layout like the image in this post with Html and CSS. I have bootstrap installed in my project but am not using it for its grid system since it only goes up to 12 columns. In some cases there will be more than 12 columns.

Here are the css classes I created to help me:

.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;
}

Please see this jsFiddle for my initial attempt.

I seem to be having issues adding rows within rows to achieve the look in the image. For example there needs to be three rows within the Primary Item row that have a height of the primary row divided by 3. Then 5 rows within each of those rows.. I just can't get it, maybe it is my css classes that aren't setup properly to do something like this.

Please note that the reason .ws-grid has a width of 3000px is because this is a number that will change dynamically based on how many columns need to be in the grid to make the content appear nicely. And yes the user will need to scroll.

Answer 1

Try using this site http://www.tablesgenerator.com/html_tables

I was able to generate this in about 10 mins. You can then go on to make it more dynamic based on how you see fit. But at least the structure is there.

Hope it helps:

https://jsfiddle.net/jk4eg1z0/

accompanying code:

<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 to create the merged cells, use the merge cells option on the website.

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>