The table tbody in HTML can slide up and down and left and right
|
When the table header is fixed, it needs to be divided into two tables: one part is thead and the other part is tbody. The specific implementation is as follows: HTML code:
<div class="table_box_big">
<div class="table_box">
<table>
<thead>
<tr>
<th><div>Title 1</div></th>
<th><div>Title 2</div></th>
<th><div>Title Three</div></th>
<th><div>Title Title Title Title Title Title Title Title Title Title 4</div></th>
<th><div>Title Title Title Title Title Title Title Title Title Title Five</div></th>
<th><div>Title Title Title Title Title Title Title Title Title Title Six</div></th>
</tr>
</thead>
</table>
<div class="table_tbody_box">
<table>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information Three</td>
<td>Information Information Information Information Information Information Information Information Information Four</td>
<td>Information Information Information Information Information Information Information Information Information Five</td>
<td>Information information information information information information information information information information six</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information Three</td>
<td>Information Information Information Information Information Information Information Information Information Four</td>
<td>Information Information Information Information Information Information Information Information Information Five</td>
<td>Information information information information information information information information information information six</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information Three</td>
<td>Information Information Information Information Information Information Information Information Information Four</td>
<td>Information Information Information Information Information Information Information Information Information Five</td>
<td>Information information information information information information information information information information six</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information Three</td>
<td>Information Information Information Information Information Information Information Information Information Four</td>
<td>Information Information Information Information Information Information Information Information Information Five</td>
<td>Information information information information information information information information information information six</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information Three</td>
<td>Information Information Information Information Information Information Information Information Information Four</td>
<td>Information Information Information Information Information Information Information Information Information Five</td>
<td>Information information information information information information information information information information six</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information Three</td>
<td>Information Information Information Information Information Information Information Information Information Four</td>
<td>Information Information Information Information Information Information Information Information Information Five</td>
<td>Information information information information information information information information information information six</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information Three</td>
<td>Information Information Information Information Information Information Information Information Information Four</td>
<td>Information Information Information Information Information Information Information Information Information Five</td>
<td>Information information information information information information information information information information six</td>
</tr>
<tr>
<td>Information 1</td>
<td>Information 2</td>
<td>Information Three</td>
<td>Information Information Information Information Information Information Information Information Information Four</td>
<td>Information Information Information Information Information Information Information Information Information Five</td>
<td>Information information information information information information information information information information six</td>
</tr>
</table>
</div>
</div>CSS style:
.table_box_big {
overflow-x: scroll;
overflow-y: hidden;
position: relative;
height: 350px;
}
.table_box {
overflow: hidden;
position: absolute;
}
.table_tbody_box {
height: 300px;
overflow: scroll;
}
table {
border: 1px solid #eeeeee;
}
table thead tr th {
width: 80px;
height: 50px;
border-right: 1px solid #eeeeee;
text-align: center;
word-break: keep-all;
padding: 2px 10px;
background: skyblue;
}
table tbody tr td {
width: 80px;
height: 50px;
border-right: 1px solid #eeeeee;
text-align: center;
border-bottom: 1px solid #eeeeee;
word-break: keep-all;
padding: 2px 10px;
}
The effect is as follows:
This is the end of this article about the fixed header of the table in html and the tbody of the table can slide up, down, left and right. For more relevant content about the fixed header of the table in html, please search the previous articles of 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Detailed explanation of the difference between adaptive and responsive analysis in vernacular
>>: Can CSS be used like this? The art of whimsical gradients
Recommend
How to install Jenkins using Docker
Table of contents 1. Pull the image 2. Create a l...
Html Select uses the selected attribute to set the default selection
Adding the attribute selected = "selected&quo...
Summary of seven MySQL JOIN types
Before we begin, we create two tables to demonstr...
How to enable Flash in Windows Server 2016
I recently deployed and tested VMware Horizon, an...
Example of how to implement a 2-column layout in HTML (fixed width on the left, adaptive width on the right)
HTML implements 2-column layout, with fixed width...
Methods and steps to upgrade MySql5.x to MySql8.x
Several Differences Between MySQL 5.x and MySQL 8...
js to achieve simple front-end paging effect
Some projects have relatively simple business, bu...
jQuery achieves the effect of advertisement scrolling up and down
This article shares the specific code of jQuery t...
Data constraint examples based on MySQL database and introduction to five integrity constraints
In order to prevent non-compliant data from enter...
MySQL database operations (create, select, delete)
MySQL Create Database After logging into the MySQ...
How to set Nginx log printing post request parameters
【Foreword】 The SMS function of our project is to ...
Implementing custom scroll bar with native js
This article example shares the specific code of ...
Example statements for indexes and constraints in MySQL
Foreign Keys Query which tables the primary key o...
MySQL quick recovery solution based on time point
The reason for writing such an article is that on...
Description of the default transaction isolation level of mysql and oracle
1. Transaction characteristics (ACID) (1) Atomici...