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

在HTML5 表格中建立捲軸

為了增強用戶在查看長表格時的體驗，添加滾動條提供了一種便捷的導航方式內容。以下是如何將捲軸合併到HTML5 表格中的逐步指南：

HTML 結構：

使用以下內容將表格資料​​封裝在表格元素中： ID，方便參考和設計樣式。您也可以根據需要定義表格行 (

) 和資料儲存格 ()。

CSS 樣式：

1. table.tableSection {

   a. “table”，以表格形式排列表格資料。
   b.將寬度指定為百分比或固定值，以控制整個表格寬度。

2. table.tableSection thead, table.tableSection tbody {

   一個。將浮動屬性設為“left”以允許標題（thead）和正文（tbody）部分並排顯示。
   b.將寬度設定為表格寬度的百分比，以確保它們佔據整個寬度。

3. table.tableSection tbody {

   a.將溢位屬性設為“auto”，以便在可用高度時啟用垂直滾動內容超出可用高度時啟用垂直滾動內容。
   b.定義高度以指定表格主體的可見區域。

4. table.tableSection tr {

   a.將寬度設定為表格寬度的百分比來控制每行的寬度。
   b.將顯示屬性設為「table」以排列每行中的儲存格。

5. table.tableSection th, table.tableSection td {

   一個。將寬度設定為表格寬度的百分比，以確定每個儲存格的寬度。

其他注意事項：

• 如果您表格包含標題行，您可能需要使用CSS 或JavaScript正文單元格之間的間距。
• 至防止標題行捲動到檢視之外，請考慮使用 calc 或position:sticky 等 CSS3 屬性來保持其可見性。
• 或者，您可以使用 JavaScript 偵測捲軸的存在並相應地套用樣式。

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