在HTML 表格中實作固定標題和固定欄位
在Web 開發中，當需要捲動時顯示大型HTML 表格可能具有挑戰性保持重要資訊的可見性。幸運的是，CSS 和 JavaScript 技術的組合可以提供一種解決方案，即固定螢幕頂部的列標題並在滾動表格資料時保持第一列固定。
一種有效的方法在工作範例中示範的是使用 CSS 屬性position:sticky 將列標題固定到位。透過將此屬性設為 top，滾動時標題將在螢幕頂部保持可見。
要修復第一列，可以使用 JavaScript 外掛程式「stickyTableHeaders」。該插件創建第一列內容的克隆，並使用 CSS 技巧將其定位以實現所需的固定效果。
以下是如何實現此功能的範例：
<code class="html"><table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Table data -->
</tbody>
</table></code><code class="css">#myTable {
width: 100%;
border-collapse: collapse;
}
#myTable thead {
position: sticky;
top: 0;
}</code><code class="javascript">// Use the stickyTableHeaders plugin to fix the first column
$('#myTable').stickyTableHeaders();</code>透過結合這些技術，您可以建立具有固定標題和固定列的HTML 表格，確保滾動期間基本資訊保持可見。
以上是如何實作HTML表格的固定表頭和固定列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
