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

MySQL character set garbled characters and solutions

Preface A character set is a set of symbols and e...

vue-router hook function implements routing guard

Table of contents Overview Global hook function R...

Example code for implementing a three-column layout with CSS, where the middle column is adaptive and changes width with text size

The questions encountered in Baidu interviews nee...

How to use border-image to implement text bubble border sample code

During the development activity, I encountered a ...

Analysis of common basic operations of MySQL database [create, view, modify and delete database]

This article uses examples to describe common bas...

Use CSS3 to implement button hover flash dynamic special effects code

We have introduced how to create a waterfall layo...

Getting Started Tutorial for Beginners ④: How to bind subdirectories

To understand what this means, we must first know ...

Three ways to implement virtual hosts under Linux7

1. Same IP address, different port numbers Virtua...

Pure CSS to achieve the internal anchor point of the web page when the up and down offset code example

Recently, when I was working on my "Football...

Basic syntax of MySQL index

An index is a sorted data structure! The fields t...

Introduction to the functions and usage of value and name attributes in Html

1. The value used in the button refers to the text...

Explanation on whether to choose paging or loading in interactive design

The author of this article @子木yoyo posted it on hi...

Solve the mysql problem: Unable to continue code execution because MSVCR120.dll is not found

1. Problem The problems encountered when initiali...

Syntax alias problem based on delete in mysql

Table of contents MySQL delete syntax alias probl...

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

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