数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
