如何在 HTML 中的表格行之間新增垂直間距？

HTML 表格中的空格分隔：綜合指南

作為 Web 開發人員，我們經常使用表格以結構化方式呈現資料。但是，可能會出現這樣的情況：您需要表格行之間有額外的垂直分隔，這超出了瀏覽器通常提供的範圍。這可以使用 CSS 實現嗎？

表格行間距的 CSS

一個常見的誤解是 CSS 屬性 border-spacing 可用來在表格之間新增垂直空間行。雖然它確實調整表格單元格之間的間距，但它不會影響行之間的垂直距離。

解決方案：填充來救援

在表格行之間建立空間，關鍵在於將填充應用於各個表格單元格 (

)。考慮以下 CSS 程式碼：

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

帶有 spaceUnder 類別的 tr 行中的 td 元素將接收 1em 的底部填充，有效地將行進一步分開。這允許您在選定的行之間建立垂直間距，同時保持乾淨且有組織的表結構。

其他注意事項

請注意，此解決方案僅適用於 tr 的直接子級元素。這使得可以建立部分之間具有不同間距的巢狀表格，如下面的程式碼所示：

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

以上是如何在 HTML 中的表格行之間新增垂直間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！