固定表格的行与列_html多行多列的表头固定-优快云博客

本文链接：https://blog.youkuaiyun.com/K18032286/article/details/120720288

这篇博客介绍了如何在HTML中创建表格，并使用CSS样式实现固定行列的效果。通过设置CSS的`position: sticky`属性，可以固定表头和列，确保在滚动时始终保持可见。此外，还详细规定了各单元格的宽度、高度以及边框样式，以达到理想的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在html中写入表格

<body>

</body>

2.在css样式中固定行列

/*固定行和固定列*/
.main {
width: 100%;
height: 100%;
overflow: auto;
margin: auto;
}
.main tr {
width: 200%;
height:5%
}
/* 设置td,th宽度高度 */
.main td, .main th {
border: 1px solid gray;
box-sizing: border-box;
}

.main th {
position: sticky;
top: 0;
background-color: #396fa2;
}
/*//强制不折行*/
.main table {
overflow: auto;
/*word-wrap: break-word;
word-break: break-all;*/
table-layout: fixed;
color: white;
text-align: center;
border-collapse: collapse; /*表格的边框合并，如果相邻，则共用一个边框。*/
border-spacing: 0px; /*设置行与单元格边框的间距。*/
}

.main td:first-child, .main th:first-child {
position: sticky;
left: 0;
z-index: 1;
background-color: #162c41;
}
.main td:nth-child(2) , .main th:nth-child(2) {
position: sticky;
left: 60px;
z-index: 1;
background-color: #162c41;
}
.main td:nth-child(3) , .main th:nth-child(3) {
position: sticky;
left: 120px;
z-index: 1;
background-color: #162c41;
}

.main th:first-child, .main th:nth-child(2), .main th:nth-child(3) {
z-index: 2;
background-color: #396fa2;
}

.main td:nth-child(3),.main td:nth-child(6) {
min-width: 100px;
}

.main td:nth-child(2), .main td:nth-child(1), .main td:nth-child(4), .main td:nth-child(5) {
min-width: 60px;
}

.main td:nth-child(7), .main td:nth-child(8) {
min-width: 120px;
}
.main td:nth-child(9), .main td:nth-child(10), .main td:nth-child(11), .main td:nth-child(12){
min-width: 160px;
}
.main td:nth-last-child(1), .main td:nth-last-child(2) {
min-width: 120px;
}