Embed a div table within a div table

Question

I would like to achieve the following layout in HTML using div tags instead of table tags (the colouring is just to make it more clear which cells I want to have equal width):

That is, I would like to be able to unfold a table layout within another table layout using only div tags. Is that possible?

Below here I have included one of my experiments. As you can see the first column is getting too wide. The inner table does not span the entire width.

.table {
  display: table;
  border-collapse: collapse;
}
.row {
  display: table-row;
  border-collapse: collapse;
}
.cell {
  display: table-cell;
  border-collapse: collapse;
  padding: 2px 6px;
}
.yellow {
  background-color: #ffdb4d;
}
.orange {
  background-color: #ffa64d;
}
.red {
  background-color: #ff6666;
}
.purple {
  background-color: #b800e6;
}
.blue {
  background-color: #66b3ff;
}
.green {
  background-color: #70db70;
}

<div class="table">
  <div class="row">
    <div class="cell yellow">cell11</div>
    <div class="cell orange">cell21</div>
    <div class="cell red">cell31</div>
    <div class="cell purple">cell41</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell12</div>
    <div class="cell orange">cell22</div>
    <div class="cell red">cell32</div>
    <div class="cell purple">cell42</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell13</div>
    <div class="cell orange">cell23</div>
    <div class="cell red">cell33</div>
    <div class="cell purple">cell43</div>
  </div>
  <div class="table">
    <div class="row">
      <div class="cell blue">Some text:</div>
      <div class="cell green">blah blah</div>
    </div>
    <div class="row">
      <div class="cell blue">Some other text:</div>
      <div class="cell green">blah blah blah</div>
    </div>
  </div>
  <div class="row">
    <div class="cell yellow">cell15</div>
    <div class="cell orange">cell25</div>
    <div class="cell red">cell35</div>
    <div class="cell purple">cell45</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell16</div>
    <div class="cell orange">cell26</div>
    <div class="cell red">cell36</div>
    <div class="cell purple">cell46</div>
  </div>
</div>

Answer 1

Here is a inline-block-solution using nth-child for backgrounds and borders. It has some pros and some cons:

• Very clean and readable html and no nested tables. Styles are easy to override and does not depend on things like colspan.

• The drawback that the number of divs in a row breaks the layout is admittedly pretty bad, but can be fixed by wrapping each row in a new tag - of course at the expense of more html.

• Removing classes on each row/cell is a relief, but instead the CSS readability suffers. (I do however prefer it this way!)

   .table{
      width: 700px;          
      font-size: 0;
    }
    .table > div > div {
      width: 20%;
      display: inline-block;
      font-size: 1rem;
      box-sizing: border-box;
      padding: 2px 6px;
    }

    /** Default rows */
    /*****************/
    .rows-default {
      border: 1px solid #ccc;
    }
    .rows-default div {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    .rows-default div:nth-child(4n+1) {
      background-color: #FFE05F;
    }
    .rows-default div:nth-child(4n+2) {
      background-color: #FFC072;
    }
    .rows-default div:nth-child(4n+3) {
      background-color: #FF605E;
    }
    .rows-default div:nth-child(4n+4) {
      width: 40%;
      background-color: #9D44B8;
      border-right: none;
    }
    .rows-default div:nth-last-child(-n+4){
      border-bottom: none;
    }

    /* Highlighted rows */
    /********************/
    .rows-highlight{ 
      border: 1px solid #ccc; 
      margin: 20px 0;
    }
    .rows-highlight div {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    .rows-highlight div:nth-child(2n+1) {
      width: 30%;
      background-color: #64B2DF;
    }
    .rows-highlight div:nth-child(2n+2) {
      width: 70%;
      background-color: #9CE25A;
      border-right: none;
    }
    .rows-highlight div:nth-last-child(-n+2){
      border-bottom: none;
    }

<div class="table">
  <div class="rows-default">
    <div>cell11</div>
    <div>cell21</div>
    <div>cell31</div>
    <div>cell41</div>

    <div>cell12</div>
    <div>cell22</div>
    <div>cell32</div>
    <div>cell42</div>

    <div>cell13</div>
    <div>cell23</div>
    <div>cell33</div>
    <div>cell43</div>
  </div>

  <div class="rows-highlight">
    <div>Some text:</div>
    <div>blah blah</div>

    <div>Some other text:</div>
    <div>blah blah blah</div>
  </div>

  <div class="rows-default">
    <div>cell11</div>
    <div>cell21</div>
    <div>cell31</div>
    <div>cell41</div>

    <div>cell12</div>
    <div>cell22</div>
    <div>cell32</div>
    <div>cell42</div>

    <div>cell13</div>
    <div>cell23</div>
    <div>cell33</div>
    <div>cell43</div>
  </div>
</div>

Answer 2

you should use flex for this:

.table {
  margin: 1em 0;
}
.row {
  display: flex;
}
.cell {
  flex:1;
  box-shadow:0 0 0 1px gray;
  padding: 2px 6px;
}
.cell.green {
  flex:3.06;
}
.yellow {
  background-color: #ffdb4d;
}
.orange {
  background-color: #ffa64d;
}
.red {
  background-color: #ff6666;
}
.purple {
  background-color: #b800e6;
}
.blue {
  background-color: #66b3ff;
}
.green {
  background-color: #70db70;
}

<div class="table">
  <div class="row">
    <div class="cell yellow">cell11</div>
    <div class="cell orange">cell21</div>
    <div class="cell red">cell31</div>
    <div class="cell purple">cell41</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell12</div>
    <div class="cell orange">cell22</div>
    <div class="cell red">cell32</div>
    <div class="cell purple">cell42</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell13</div>
    <div class="cell orange">cell23</div>
    <div class="cell red">cell33</div>
    <div class="cell purple">cell43</div>
  </div>
  <div class="table">
    <div class="row">
      <div class="cell blue">Some text:</div>
      <div class="cell green">blah blah</div>
    </div>
    <div class="row">
      <div class="cell blue">Some other text:</div>
      <div class="cell green">blah blah blah</div>
    </div>
  </div>
  <div class="row">
    <div class="cell yellow">cell15</div>
    <div class="cell orange">cell25</div>
    <div class="cell red">cell35</div>
    <div class="cell purple">cell45</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell16</div>
    <div class="cell orange">cell26</div>
    <div class="cell red">cell36</div>
    <div class="cell purple">cell46</div>
  </div>
</div>

or drop display:table on parent to break the table-layout. colspan CSS is not avalaible.

.table {
  display: inline-block;/* instead table to be able to shrink on content as table does*/
  vertical-align:top;
  margin:1em 0;
}
.row {
  width:100%;
  display: table;
  table-layout:fixed;/* add/remove this to find out what behavior on width it involves*/
  border-collapse: collapse;
}
.cell {
  display: table-cell;
  border-collapse: collapse;
  padding: 2px 6px;
  box-shadow:0 0 0 1px gray
}
.cell.green {
  width:73%;
}
.yellow {
  background-color: #ffdb4d;
}
.orange {
  background-color: #ffa64d;
}
.red {
  background-color: #ff6666;
}
.purple {
  background-color: #b800e6;
}
.blue {
  background-color: #66b3ff;
}
.green {
  background-color: #70db70;
}

<div class="table">
  <div class="row">
    <div class="cell yellow">cell11</div>
    <div class="cell orange">cell21</div>
    <div class="cell red">cell31</div>
    <div class="cell purple">cell41</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell12</div>
    <div class="cell orange">cell22</div>
    <div class="cell red">cell32</div>
    <div class="cell purple">cell42</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell13</div>
    <div class="cell orange">cell23</div>
    <div class="cell red">cell33</div>
    <div class="cell purple">cell43</div>
  </div>
  <div class="table">
    <div class="row">
      <div class="cell blue">Some text:</div>
      <div class="cell green">blah blah</div>
    </div>
    <div class="row">
      <div class="cell blue">Some other text:</div>
      <div class="cell green">blah blah blah</div>
    </div>
  </div>
  <div class="row">
    <div class="cell yellow">cell15</div>
    <div class="cell orange">cell25</div>
    <div class="cell red">cell35</div>
    <div class="cell purple">cell45</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell16</div>
    <div class="cell orange">cell26</div>
    <div class="cell red">cell36</div>
    <div class="cell purple">cell46</div>
  </div>
</div>

Answer 3

You can make the three separated tables rather than one. See the updated example:

.table {
  display: table;
  border-collapse: collapse;
  table-layout: fixed; /*new*/
  width: 100%; /*new*/
  margin-bottom: 20px; /*new*/
}
.row {
  display: table-row;
  border-collapse: collapse;
}
.cell {
  display: table-cell;
  border-collapse: collapse;
  padding: 2px 6px;
}
.yellow {
  background-color: #ffdb4d;
}
.orange {
  background-color: #ffa64d;
}
.red {
  background-color: #ff6666;
}
.purple {
  background-color: #b800e6;
}
.blue {
  background-color: #66b3ff;
}
.green {
  background-color: #70db70;
}

<div class="table">
  <div class="row">
    <div class="cell yellow">cell11</div>
    <div class="cell orange">cell21</div>
    <div class="cell red">cell31</div>
    <div class="cell purple">cell41</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell12</div>
    <div class="cell orange">cell22</div>
    <div class="cell red">cell32</div>
    <div class="cell purple">cell42</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell13</div>
    <div class="cell orange">cell23</div>
    <div class="cell red">cell33</div>
    <div class="cell purple">cell43</div>
  </div>
</div>

<div class="table">
  <div class="row">
    <div class="cell blue" style="width:30%;">Some text:</div>
    <div class="cell green">blah blah</div>
  </div>
  <div class="row">
    <div class="cell blue">Some other text:</div>
    <div class="cell green">blah blah blah</div>
  </div>
</div>

<div class="table">
  <div class="row">
    <div class="cell yellow">cell15</div>
    <div class="cell orange">cell25</div>
    <div class="cell red">cell35</div>
    <div class="cell purple">cell45</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell16</div>
    <div class="cell orange">cell26</div>
    <div class="cell red">cell36</div>
    <div class="cell purple">cell46</div>
  </div>
</div>

Answer 4

Just a suggestion: I don't really understand why to use div instead of tables in this case. It seems to be a "table" for real tabular data, tables would make it easier for you.

Even though, yes! :D You can achieve this using divs and css. I made you an example and you can see it working here http://codepen.io/anon/pen/QNWKdV

It would be useful for you to use css classes like .w[size] as you can see below.

<div class="table w100">
  <div class="row">
    <div class="cell yellow">cell11</div>
    <div class="cell orange">cell21</div>
    <div class="cell red">cell31</div>
    <div class="cell purple">cell41</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell12</div>
    <div class="cell orange">cell22</div>
    <div class="cell red">cell32</div>
    <div class="cell purple">cell42</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell13</div>
    <div class="cell orange">cell23</div>
    <div class="cell red">cell33</div>
    <div class="cell purple">cell43</div>
  </div>
</div>
<div class="table w100">
  <div class="row">
    <div class="cell w30 blue">Some text:</div>
    <div class="cell w70 green">blah blah</div>
  </div>
  <div class="row">
    <div class="cell w30 blue">Some other text:</div>
    <div class="cell w70 green">blah blah blah</div>
  </div>
</div>
<div class="table w100">
  <div class="row">
    <div class="cell yellow">cell15</div>
    <div class="cell orange">cell25</div>
    <div class="cell red">cell35</div>
    <div class="cell purple">cell45</div>
  </div>
  <div class="row">
    <div class="cell yellow">cell16</div>
    <div class="cell orange">cell26</div>
    <div class="cell red">cell36</div>
    <div class="cell purple">cell46</div>
  </div>
</div>

.table {
  display: table;
  border-collapse: collapse;
}
.row {
  display: table-row;
  border-collapse: collapse;
}
.cell {
  display: table-cell;
  border-collapse: collapse;
  padding: 2px 6px;
  width: 25%;
}
.yellow {
  background-color: #ffdb4d;
}
.orange {
  background-color: #ffa64d;
}
.red {
  background-color: #ff6666;
}
.purple {
  background-color: #b800e6;
}
.blue {
  background-color: #66b3ff;
}
.green {
  background-color: #70db70;
}

.w5  {width:  5%;}
.w10 {width: 10%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w35 {width: 35%;}
.w40 {width: 40%;}
.w45 {width: 45%;}
.w50 {width: 50%;}
.w55 {width: 55%;}
.w60 {width: 60%;}
.w65 {width: 65%;}
.w70 {width: 70%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w85 {width: 85%;}
.w90 {width: 90%;}
.w95 {width: 95%;}
.w100 {width: 100%;}

I hope you can accomplish your task.

Good luck.

Regards.

Answer 5

here is the code that you will need to accomplish what you want

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {
            min-width: 200px;
            min-height: 200px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div style="display: table;">
        <div style="display: table-column-group;">
            <div style="display: table-column; background-color: #FFE061;"></div>
            <div style="display: table-column; background-color: #FFC072;"></div>
            <div style="display: table-column; background-color: #FF605E;"></div>
            <div style="display: table-column; background-color: #9D44B8;"></div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
            <div style="display: table-cell;"></div>
        </div>
    </div>
</body>
</html>

now let's explain all of this as you requested you want to create a table but without the table html tag you can do so with divs using CSS3 specifically using the display in order to choose how to display this div (note that the default value is block for divs) I believe you would be able to understand it much better if you compare between the two codes the one with the divs and the other which is a normal table

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        table {
            min-height: 500px;
            min-width: 600px;
        } 
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col style="background-color: #FFE061;" />
            <col style="background-color: #FFC072;" />
            <col style="background-color: #FF605E;" />
            <col style="background-color: #9D44B8;" />
        </colgroup>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>