使用CSS将多个连续的行单元分组为一个？

Question

好的，这里有一个图解来解释我在谈论的内容：

第一个表格是我的html目前生成的，第二个表格是我希望它生成的。

＆＃13;

＆＃13;

#animalTable{
    display: table;
 }

.animalRow{
    display: table-row;
 }

.animalCell{
    display: table-cell;
    width: 33%;
 }

＆＃13;

<div id="animalTable">
    <div class="animalRow">
        <div class="animalCell">Dog</div>
        <div class="animalCell">Milton</div>
        <div class="animalCell">1/2/1998</div>
    </div>
    ...
 </div>

＆＃13;

＆＃13;

＆＃13;

获得我想要的桌子的最佳/最简单方法是什么？我知道我可以通过在主表中创建子表来强制它，但我想知道是否有更好的方法？

另外，对不起，如果这是一个愚蠢的问题。

Answer 1

我建议在此特定情况下使用tables代替div。这就是为什么你应该Use tables for what they are meant to and div's for what they are meant to。

您要找的是 Colspan 和 Rowspan ，两者都是HTML td和th属性。

示例：

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

您可以在w3schools上进一步阅读。

希望这有帮助。

Answer 2

简单，添加不同的类或id选择器，然后在css中删除所有边框并重新添加要保留的边框。例如，

div{
border: none;
border-top: solid 1px black;
border-left: solid 1px black;
}

如果我误解，请纠正我。否则，如果您有任何疑问，请不要犹豫！