CSS to achieve the first row and first column of the table fixed and adaptive window example code

CSS to achieve the first row and first column of the table fixed and adaptive window example code

Today's campus recruitment written test requires the implementation of a fixed first row and first column, with the width adaptive to window changes, but the window cannot be reduced to a certain width and a horizontal scroll bar appears...
I wrote it wrong at that time, and I couldn't think of a way to fix the first row and the first column, use absolute positioning, and relative positioning of the father... This will cause many problems to be solved...
So I came back and studied it. I didn’t learn these properties in the previous tutorials. I learned a lot haha…

First understand a few concepts:

table-layout:

The table-layout property has two specific values:
auto (default) - the total width of the table determines the maximum value of each cell
fixed - The total width of the table is determined by the definition of the table width and the definition of the width of each column. If the width is not defined, the table width is divided equally.
The table width is set by the table width. The width of a column is determined only by the cells in the first row of the column . The width of cells in other rows will not affect the width of the entire column.
Note: Custom width must be defined in the first cell to be effective (th)

position : sticky

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. Elements are relatively positioned until they cross a certain threshold, after which they become fixed.
When visible in the target area, its behavior is like relative and there is no change. When the page scrolls beyond the target area, its behavior changes to fixed and it is fixed to the target position.
A sticky element is "fixed" to the nearest ancestor with a " scrolling mechanism " (when the overflow of the ancestor is hidden, scroll, auto, or overlay), even if the ancestor is not the nearest real scrollable ancestor.
It should be noted that when position: sticky is applied to table, it can only work on th and td, and has no effect on tr. In addition, the target position left/right/top/bottom must be defined for the fixed effect to appear!

accomplish:

1. Adaptive <br /> The table is wrapped in a div with a width of 100%, and a scroll bar appears when it overflows

.box {
      width: 100%;
      height: 200px;
      background-color: #eee;
      overflow:auto;
       margin: 10px;
    }

Table, width 100%, set a minimum width, I set it to 1000px here, this depends on personal settings

table {
      width: 100%;
      min-width: 1000px;
       /* Custom width should be set to fixed */
      table-layout: fixed;
      /* Set cell spacing */
      border-spacing:0;
    }

2. To fix the first row and first column, you need to set sticky positioning on the first row and first column.
First row settings

thead tr th {
      /* th sets sticky positioning */
      background-color: pink;
      position: sticky;
      top: 0;
        /* top border */
        border-top: 1px solid black;
    }

First column settings

 td:first-child {
      /* td first sticky positioning */
      position: sticky;
      left: 0;
      background-color: skyblue;
    }

If you need to change the cell width, you need to set table-layout: fixed
This property sets the default cell to divide the table width equally. If the first cell (th) of the first column is set to a fixed width of 200px, then the width of this column will be 200px.
Note that it is the first cell

td:first-child,th:first-child {
         /* Set the first column to 200. Setting th is effective. Adding td here is mainly for setting Border*/
         width: 200px;
         border-left: 1px solid black;
    }

Another thing to note is the border. You need to set the border of each cell individually. If the border collapses, the scrolling will follow, which will not look good.

Overall code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 100%;
      height: 200px;
      background-color: #eee;
      overflow:auto;
      margin: 10px;
    }
    table {
      width: 100%;
      min-width: 1000px;
       /* Custom width should be set to fixed */
      table-layout: fixed;
      /* Set cell spacing */
      border-spacing:0;
    }
    
    td,th {
      border-bottom: 1px solid black;
      border-right: 1px solid black;
      box-sizing: border-box;
      /* Display if the length exceeds... */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    td:first-child,th:first-child {
         /* Set the first column to 200, setting th is effective*/
         width: 200px;
         border-left: 1px solid black;
    }
    /* If border collapses, scrolling will follow, so set border for each element separately */
    td:last-child, th:last-child {
      border-right: 1px solid black;
    }
    th:last-child, td:last-child {
      border-right: 1px solid black;
    }
    .last td {
      /* Bottom border of the last line */
      border-bottom: 1px solid black;
    }
    
    thead tr th {
      /* th sets sticky positioning */
      background-color: pink;
      position: sticky;
      top: 0;
        /* top border */
        border-top: 1px solid black;
    }
   
    td:first-child {
      /* td first sticky positioning */
      position: sticky;
      left: 0;
      background-color: skyblue;
    }
    thead tr th:first-child {
      /* The first one is set at the top to ensure that it is not covered by up and down and left and right scrolling*/
      z-index: 1;
      left: 0;
    }
  </style>
</head>


<body>
  <div class="box">
  <table>
    <thead>
      <tr>
      <th>Name</th>
      <th>Student Number</th>
      <th>Age</th>
      <th>Results</th>
      <th>Hobbies</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>Coke11111111111111111111111111111111111111111111111111</td>
        <td>Coke11111111</td>
        <td>Coke 222222222</td>
        <td>Coke 33333333333333333333333333</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
      <tr class="last">
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
        <td>Coke</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Effect: (Not very good yet, keep working on it)

insert image description here

This concludes this article about how to use CSS to fix the first row and first column of a table and implement adaptive window examples. For more information on how to use CSS to fix the first row and first column of a table, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  MySQL Database Basics SQL Window Function Example Analysis Tutorial

>>:  Introduction to the process of using NFS remote directory mounting in CentOS environment

Recommend

A detailed introduction to the redesign of the Weibo component on the website (pictures and text)

Written in front Weibo components are component p...

Detailed explanation of the usage of compose function and pipe function in JS

Table of contents compose function Array.prototyp...

Detailed explanation of mysql integrity constraints example

This article describes the MySQL integrity constr...

Tutorial on installing mysql5.7.17 via yum on redhat7

The RHEL/CentOS series of Linux operating systems...

uniapp Sample code for implementing global sharing of WeChat mini-programs

Table of contents Create a global shared content ...

Time zone issues with Django deployed in Docker container

Table of contents Time zone configuration in Djan...

A brief discussion on innodb's index page structure, insert buffer, and adaptive hash index

Physical Structure of an InnoDB Index All InnoDB ...

Complete steps for deploying jar package projects using Shell scripts in Linux

1. Install JDK Check the computer's operating...

MySQL functional index optimization solution

When using MySQL, many developers often perform f...

View the command to modify the MySQL table structure

Brief description The editor often encounters som...

Detailed tutorial on how to modify the root password after forgetting it in MySQL 5.7

Preface For a long time, the application and lear...

How to use SVG icons in WeChat applets

SVG has been widely used in recent years due to i...

IDEA uses the Docker plug-in (novice tutorial)

Table of contents illustrate 1. Enable Docker rem...

Detailed tutorial on installing Ubuntu 19.10 on Raspberry Pi 4

Because some dependencies of opencv could not be ...

MySQL 8.0.22 winx64 installation and configuration graphic tutorial

mysql 8.0.22 winx64 installation and configuratio...