如何使 HTML 表格出現捲軸？

如何在html 表格上顯示滾動條

在HTML 中建立表格時，經常會遇到想要保持表格一致的情況大小，同時確保即使行數超出可見區域，其內容仍可存取。為了實現這一點，您可能會遇到需要在表格本身內顯示捲軸的情況。

在這種情況下，您可能會嘗試使用以下CSS 樣式：

tbody {
  height: 80em;
  overflow: scroll;
}

並將它們合併到您的HTML 結構中：

<table border=1>

但是，您可能已經注意到，儘管實現了這些樣式，但滾動條無法出現。這個問題源自於以下事實：

的父元素是標籤，即；

要解決此問題，您需要修改 CSS 規則以將它們應用於

元素。和 elements:

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table * {
  background: yellow;
  color: black;
}

#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

另外，你需要將

包起來。 <div> 內的元素ID 為「table-wrapper」的元素：

<div>

透過實作這些更改，您可以在 HTML 表格中成功顯示捲軸，從而允許使用者無縫導航其內容。

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