html - 使用 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>

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

另外，抱歉，如果这是一个愚蠢的问题。

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 上进一步阅读.

希望这对您有所帮助。