在div表中嵌入div表

Question

我想使用div标签而不是表格标签在HTML中实现以下布局（着色只是为了让我更清楚我想要具有相同宽度的单元格）：

也就是说，我希望能够仅使用div标签在另一个表格布局中展开表格布局。这可能吗？

下面我已经包含了我的一个实验。正如您所看到的，第一列太宽了。内表不会跨越整个宽度。

.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

你应该使用flex：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或drop display：用于打破表格布局的父表格。 colspan CSS不可用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是您需要完成所需的代码

<!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>

现在让我们解释所有这些 按照您的要求，您想要创建一个表，但没有表html标记 你可以使用CSS使用CSS3专门使用显示来选择如何显示这个div（注意div的默认值是块） 我相信你能够更好地理解它，如果你比较两个代码，一个与divs，另一个是普通的表

<!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>

Answer 3

只是一个建议：我真的不明白为什么在这种情况下使用div而不是表格。 它似乎是真实表格数据的“表格”，表格会让你更容易。

尽管如此，是的！ ：D你可以使用div和css实现这一点。 我给你举了一个例子，你可以看到它在这里工作http://codepen.io/anon/pen/QNWKdV

您可以使用.w[size]之类的css类，如下所示。

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

我希望你能完成任务。

祝你好运。

问候。

Answer 4

您可以制作三个独立的表而不是一个。请参阅更新的示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

这是一个使用nth-child作为背景和边框的内联块解决方案。它有一些优点和一些缺点：

• 非常简洁易读的html，没有嵌套表格。样式很容易覆盖，不依赖于像colspan这样的东西。

• 一行中div的数量打破布局的缺点无疑是相当糟糕的，但可以通过将每一行包装在一个新标签中来修复 - 当然是以更多的html为代价。

• 删除每行/单元格上的类是一种解脱，但CSS可读性会受到影响。 （但我喜欢这样做！）

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