如何在 HTML5 表格中新增捲軸？

如何在HTML5 表格中加入滾動性

要為僅顯示有限數量的行的表格添加捲軸，請按照以下步驟操作：

1。定義表格結構：

建立一個具有必要列和行的基本 HTML5 表格。例如：

<table>

2。設定表格 CSS：

要設定表格樣式，請使用 CSS 指定其尺寸、顏色和對齊方式。例如：

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}

3。建立捲軸：

要新增捲軸，請將焦點放在表格的主體上。此部分應配置如下：

tbody {
    overflow: auto;
    height: 150px;
}

• overflow：當表格內容超出其高度時自動啟用捲動。
• height：150px 將表格的可見高度設定為150像素，確保一次只顯示幾行時間。

4。保持列對齊：

如果您的表格有標題行，則需要確保滾動時它與主體保持對齊。這可以透過將兩個元素包裝在 tableSection 類別中並應用以下 CSS 來實現：

table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}

5。調整列寬（可選）：

要確保所有表格列具有相同的寬度，無論其內容如何，您可以包含以下CSS：

table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

6.從標題中刪除捲軸（可選）：

如果您不希望標題可捲動，請新增以下CSS規則：

table.tableSection thead {
    overflow: hidden;
}

7.處理捲軸的存在（選用）：

要根據捲軸的存在動態調整CSS，請考慮使用JavaScript 來偵測其存在並套用必要的樣式。

以上是如何在 HTML5 表格中新增捲軸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！