如何在不使用 CSS 的情況下在表中的行之間添加空格？

如何在不使用CSS 的情況下在表格中的行之間添加空格

您可能想知道是否可以在表格中的行之間添加空格使用CSS。不幸的是，CSS 屬性 border-spacing 並沒有達到這種預期的效果。 border-spacing 屬性僅在表格單元格之間新增空間，而不是在行之間新增空間。

相反，您需要在

上使用填充。用於在行之間添加空間的元素。您可以使用以下 CSS 程式碼：

tr.classname td {
  padding-bottom: 5em;
}

這將為每個

的底部添加 5em 的填充。 中的元素與類別的類別名稱。您可以根據需要調整填充量。

以下是其工作原理的範例：

<table class="classname">
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
    </tr>
    <tr>
      <td>Cell C</td>
      <td>Cell D</td>
    </tr>
  </tbody>
</table>

這將建立一個每行之間有 5em 空間的表格。

請注意，您也可以使用頂部填充而不是底部填充，這取決於您想要的效果。

如果需要在巢狀表格中的行之間添加空格，可以使用以下 CSS 程式碼:

tr.spaceUnder > td {
  padding-bottom: 1em;
}

這將在每個

的底部添加 1em 的填充。作為 的直接子元素的元素具有 spaceUnder 類別的元素。

以上是如何在不使用 CSS 的情況下在表中的行之間添加空格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！