Home >Web Front-end >CSS Tutorial >How Can I Create a Fixed Header Table with Both Horizontal and Vertical Scrollbars Using JavaScript?
How Can I Create a Fixed Header Table with Both Horizontal and Vertical Scrollbars Using JavaScript?
- Susan SarandonOriginal
- 2024-12-01 11:46:14758browse
Fixed header table with horizontal scrollbar and vertical scrollbar on outer container
There is no simple HTML/CSS solution for creating a fixed header table with both horizontal and vertical scrollbars on the outer container. One possible solution is to use JavaScript to manually synchronize the scrolling of the header and body sections of the table.
Here is an example of how this could be achieved using jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Fixed header table with horizontal scrollbar and vertical scrollbar on outer container</title>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
width: 100%;
}
tr {
width: 100%;
}
.outer-container {
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
right: 300px;
bottom: 40px;
overflow: hidden;
}
.inner-container {
height: 100%;
overflow: hidden;
}
.table-header {
position: relative;
width: 100%;
}
.table-body {
overflow: auto;
height: calc(100% - 40px);
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5 {
width: 120px;
min-width: 120px;
}
.col2 {
min-width: 300px;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="table-header">
<table>The above is the detailed content of How Can I Create a Fixed Header Table with Both Horizontal and Vertical Scrollbars Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!