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

Question

好的，这是一张图形来解释我在说什么：

第一个表是我的html当前生成的内容，第二个表是我希望它生成的内容。

 #animalTable{ display: table; } .animalRow{ display: table-row; } .animalCell{ display: table-cell; width: 33%; } 

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

拿到我想要的桌子的最好/最简单的方法是什么？ 我知道可以通过在主表内创建子表来强行使用它，但我想知道是否有更好的方法？

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

Answer 1

对于这种特定情况，我建议使用tables而不是div 。 这就是为什么您应该将表用于其含义，将div用于其含义 。

您要查找的是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;
}

如果我误会了，请纠正我。 否则，如果您有任何疑问，请随时提出！