The table tbody in HTML can slide up and down and left and right

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

Linux Network System Introduction

Table of contents Network Information Modify the ...

Vue implements accordion effect

This article example shares the specific code of ...

Sending emails in html is easy with Mailto

Recently, I added a click-to-send email function t...

Basic Implementation of AOP Programming in JavaScript

Introduction to AOP The main function of AOP (Asp...

Detailed explanation of 2 methods to synchronize network time in Linux/CentOS system

Due to hardware reasons, the machines may not kee...

Details about the like operator in MySQL

1. Introduction When filtering unknown or partial...

Native JavaScript implementation of progress bar

The specific code for JavaScript to implement the...

Detailed tutorial on installing the jenkins container in a docker environment

Recommended Docker learning materials: https://ww...

Introducing multiple custom fonts in CSS3

Today I found a problem in HTML. There are many d...

Xhtml special characters collection

nbsp &#160; no-break space = non-breaking spa...

Detailed explanation of how to build an Ftp server on Ubuntu (success guaranteed)

1. This afternoon, due to the requirements of the...

Detailed explanation of the this pointing problem of JavaScript prototype objects

Table of contents 1. this points to 2. Modify thi...

Analysis and treatment of scroll bars in both HTML and embedded Flash

We often encounter this situation when doing devel...

Eight examples of how Vue implements component communication

Table of contents 1. Props parent component ---&g...

Solution to inserting a form with a blank line above and below

I don't know if you have noticed when making a...