資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何建立具有固定左側列和可滾動主體HTML表格？
表格基本上是由行和列組成的結構化資料集合（表格資料）。HTML表格使網頁設計師能夠將文字、影像、連結、其他表格等資料組織成單元格的行和列。它們使用<table>標籤建立，其中包含用於表格行的<tr>標籤、用於表格標題的<th>標籤和用於資料單元格的<td>標籤。預設情況下，<td>下的元素是常規的左對齊的。
示例
讓我們看看下面的示例，它演示了HTML中一個簡單的表格。
<!DOCTYPE html>
<html>
<head>
<title>An example of a simple table</title>
</head>
<body>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>United States of America</td>
<td>Washington D.C.</td>
</tr>
<tr>
<td>United Kingdom</td>
<td>London</td>
</tr>
</tr>
</table>
</body>
</html>
我們還可以使用CSS樣式屬性（如邊框、背景顏色、填充、邊距、位置、行跨度、列跨度等）使表格看起來更美觀。
在本教程中，我們將討論建立具有固定左側列和可滾動主體HTML表格的方法。
使用position和overflow屬性
元素的position屬性指定使用的定位方法型別（靜態、相對、絕對、固定或粘性）。
語法
以下是語法
position: static|absolute|fixed|relative|sticky;
其中，
靜態：元素按其在文件流中出現的順序呈現。
絕對：元素相對於其第一個（靜態）祖先元素定位。
固定：元素相對於瀏覽器視窗放置。
相對：元素相對於其預設位置定位，因此“right:10px”會在元素的右側位置新增10畫素。
粘性：元素的位置由使用者的滾動位置決定。根據滾動位置，粘性元素在相對模式和固定模式之間切換。它以相對方式定位，直到滿足視口中給定的偏移位置，此時它會“貼上”到位（如position: fixed）。
Overflow屬性
overflow屬性描述如果內容超出元素框應該發生什麼。當元素的內容太大而無法容納在定義的區域內時，此屬性指示是裁剪它還是新增捲軸。只有具有特定高度的塊級元件才能使用overflow屬性。
語法
overflow: visible|hidden|clip|scroll|auto;
其中，
可見：沒有溢位裁剪。它在元素邊界之外呈現。這是預設設定。
隱藏：溢位被裁剪，其餘內容被隱藏。內容可以透過程式設計方式滾動。
裁剪：溢位被裁剪，其餘內容被隱藏。禁止滾動，包括程式設計滾動。
滾動：溢位被裁剪，但添加了捲軸以允許訪問其餘內容。
自動：如果發生溢位裁剪，則應新增捲軸以允許訪問其餘內容。
透過對這兩個屬性的簡要了解，讓我們看看如何使用它們來建立具有固定左側列和可滾動主體的表格。
使用Position:absolute和Overflow-x:visible
當塊級元素在左右邊緣溢位時，overflow-x屬性指定是裁剪內容、新增捲軸還是顯示溢位內容。
示例
下面的示例透過為左側列設定絕對位置和固定寬度，併為整個表格將overflow-x屬性設定為滾動，從而建立了一個具有固定左側列和可滾動主體的表格。
<!DOCTYPE html>
<html>
<head>
<title>
How to Create an HTML Table with a Fixed Left Column and Scrollable Body?
</title>
<style>
table {
border-spacing: 0;
border-top:1px solid deeppink;
}
td{
border: 1px solid deeppink;
border-top-width: 0px;
letter-spacing:2px;
text-align:center;
background:lavenderblush;
}
th{
border: 1px solid deeppink;
border-top-width: 0px;
letter-spacing:3px;
text-align:center;
background:lightpink;
color:white;
}
div {
width: 230px;
overflow-x: scroll;
margin-left: 146px;
overflow-y: visible;
padding: 0;
}
.left {
position: absolute;
width: 150px;
left: 0;
border-top-width: 1px;
margin-top: -1px
}
</style>
</head>
<body>
<div>
<table class="fixed">
<tr>
<th class="left">ROLL NO.</th>
<th>NAME</th>
<th>MATHEMATICS</th>
<th>PHYSICS</th>
<th>CHEMISTRY</th>
</tr>
<tr>
<td class="left">01</td>
<td>Dimple</td>
<td>100</td>
<td>99</td>
<td>99</td>
</tr>
<tr>
<td class="left">02</td>
<td>Celina</td>
<td>99</td>
<td>97</td>
<td>96</td>
</tr>
<tr>
<td class="left">03</td>
<td>Rishi</td>
<td>96</td>
<td>94</td>
<td >92</td>
</tr>
<tr>
<td class="left">04</td>
<td>Zeenat</td>
<td>93</td>
<td>90</td>
<td>89</td>
</tr>
<tr>
<td class="left">05</td>
<td>Harsh</td>
<td>90</td>
<td>87</td>
<td>85</td>
</tr>
</table>
</div>
</body>
</html>
使用Position:sticky
以下示例顯示瞭如何透過將左側列的position屬性設定為sticky來建立具有固定左側列和可滾動主體的表格。在這種方法中，我們不會使用overflow屬性。
示例
<!DOCTYPE html>
<html>
<head>
<title>
How to Create an HTML Table with a Fixed Left Column and Scrollable Body?
</title>
<style>
table{
border:2px solid navy;
border-spacing:0;
}
td, th{
border:1px solid lightblue;
}
.exterior {
margin: auto;
width: 350px;
}
.interior {
position: relative;
overflow: auto;
white-space: nowrap;
}
.left {
position: sticky;
background-color: white;
}
.col1 {
width: 100px;
min-width: 100px;
max-width: 150px;
left: 0px;
}
</style>
</head>
<body>
<div class="exterior">
<div class="interior">
<table class="table">
<thead>
<tr>
<th class="left col1">EMPLOYEE ID</th>
<th>NAME</th>
<th>AGE</th>
<th>DEPARTMENT</th>
<th>EXPERIENCE</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left col1">65</td>
<td>Anisha Reddy</td>
<td>25</td>
<td>Operations</td>
<td>2 years</td>
</tr>
<tr>
<td class="left col1">210</td>
<td>Alfiya Karim</td>
<td>21</td>
<td>Sales Stratergy</td>
<td>0 years</td>
</tr>
<tr>
<td class="left col1">149</td>
<td>Rohan Sharma</td>
<td>30</td>
<td>Digital Marketing</td>
<td>1 year</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
2K+ 瀏覽量
