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

將捲軸整合到HTML5 表格中：綜合指南

在HTML5 中，增強表格的功能對於管理大型資料集至關重要。其中一項增強功能是新增捲軸，以允許用戶輕鬆瀏覽大量內容。

第1 步：定義表格結構

首先在HTML5 中定義表格結構如下所示：

表格由兩個部分組成：頭部(

) 包含表格標題和保存資料行的正文(

)。

第2 步：設定表格樣式

接下來，新增CSS 樣式以增強表格的外觀並提供可自訂的捲軸：

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

#my_table thead, #my_table tbody {
  /* Separate styling for the table sections */
  display: table;
  width: 100%;
}

#my_table tbody {
  /* Styling for the body, including scrollbar */
  overflow: auto;
  height: 150px;
}

#my_table tr {
  /* Styling for individual rows */
  width: 100%;
  display: table;
  text-align: left;
}

#my_table th, #my_table td {
  /* Styling for table cells */
  width: 33%;
}

此CSS 確保表格適合預先定義的寬度，具有圓形邊框，並在正文部分有一個捲軸。

第3 步：其他注意事項（可選）

為了增強控制，您可以透過以下方式防止表格標題滾動在

中加入padding- right部分，佔滾動條的寬度。

#my_table thead {
  padding-right: 18px;
  width: calc(100% - 18px);
}

結論

透過執行以下步驟，您可以輕鬆地將捲軸整合到HTML5 表格中，確保最佳效果瀏覽大量資料集時的使用者體驗。

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