使用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;
}

如果我誤會了，請糾正我。 否則，如果您有任何疑問，請隨時提出！