CSS表格的行數(shù)和列數(shù)設(shè)置

在CSS中，我們可以使用display: table;來(lái)創(chuàng)建一個(gè)表格，但是CSS本身并不直接支持設(shè)置表格的行數(shù)和列數(shù)，這個(gè)需求通常是通過(guò)HTML來(lái)完成的，因?yàn)镠TML提供了<table>、<tr>和<td>等標(biāo)簽，可以明確地指定表格的結(jié)構(gòu)。

不過(guò)，如果我們想要在CSS中模擬一個(gè)固定行數(shù)和列數(shù)的表格，可以通過(guò)設(shè)置width和height屬性來(lái)實(shí)現(xiàn)，我們可以創(chuàng)建一個(gè)4行3列的表格：

.table {
  display: table;
  width: 300px;
  height: 120px;
}
.row {
  display: table-row;
  height: 30px;
}
.cell {
  display: table-cell;
  width: 100px;
  height: 30px;
}

在HTML中這樣使用：

<div class="table">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
  <div class="row">
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
  <div class="row">
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
  </div>
  <div class="row">
    <div class="cell">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
  </div>
</div>

這樣，我們就得到了一個(gè)4行3列的表格，每個(gè)單元格的寬度和高度都是固定的，可以通過(guò)調(diào)整CSS中的width和height屬性來(lái)改變，這種方法雖然不直接，但可以在一定程度上滿足我們需要在CSS中設(shè)置表格行數(shù)和列數(shù)的需求。