Table of Contents
What is table-layout: fixed ?
Sample code
Things to note
Common application scenarios
Home Web Front-end CSS Tutorial css table-layout fixed example

css table-layout fixed example

Jul 29, 2025 am 04:28 AM
php java

table-layout: fixed will force the table column width to be determined by the cell width of the first row to avoid the content affecting the layout. 1. Set table-layout: fixed and specify the table width; 2. Set the specific column width ratio for the first row th/td; 3. Use white-space: nowrap, overflow: hidden and text-overflow: ellipsis to control text overflow; 4. Suitable for background management, data reports and other scenarios that require stable layout and high-performance rendering, which can effectively prevent layout jitter and improve rendering efficiency.

css table-layout fixed example

When using table-layout: fixed , CSS changes the column width calculation method of HTML tables, making the table layout more predictable and perform better. Here is a practical table-layout: fixed example and explain its role and usage scenarios.

css table-layout fixed example

What is table-layout: fixed ?

By default, table-layout of the table is auto , and the browser will automatically adjust the column width according to the content. After setting to fixed , the column width is determined only by the table width and the width of the first row of cells . The subsequent cell content will not affect the column width, thereby improving rendering performance and avoiding layout jitter.


Sample code

 <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Fixed Table Layout Example</title>
  <style>
    .fixed-table {
      width: 100%;
      table-layout: fixed; /* Key: Enable fixed layout*/
      border-collapse: collapse;
      font-family: Arial, sans-serif;
    }

    .fixed-table th,
    .fixed-table td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; /* Prevent text line wrapping*/
    }

    .fixed-table th {
      background-color: #f0f0f0;
    }

    /* Manually set column width*/
    .fixed-table th:nth-child(1),
    .fixed-table td:nth-child(1) {
      width: 20%; /* The first column accounts for 20% */
    }

    .fixed-table th:nth-child(2),
    .fixed-table td:nth-child(2) {
      width: 30%; /* The second column accounts for 30% */
    }

    .fixed-table th:nth-child(3),
    .fixed-table td:nth-child(3) {
      width: 50%; /* The third column accounts for 50% */
    }
  </style>
</head>
<body>

  <table class="fixed-table">
    <head>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Remarks</th>
      </tr>
    </head>
    <tbody>
      <tr>
        <td>Zhang San</td>
        <td>Front-end development engineer</td>
        <td>Excellent in React and Vue, the code is written very well</td>
      </tr>
      <tr>
        <td>Li Si</td>
        <td>UI Designer</td>
        <td>The design draft is perfect in details, and often overtime to modify the drawings</td>
      </tr>
      <tr>
        <td>Wang Wu</td>
        <td>Data Analyst</td>
        <td>Millions of data are processed every day, and report generation is automated</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Benefits of using table-layout: fixed

  • Stable layout : The column width will not change suddenly because a row has too long content.
  • Faster rendering : The browser can determine the column width without reading all content.
  • Suitable for fixed structure tables : such as background management systems, data reports, etc.
  • It is better to use with text-overflow: ellipsis : long text automatically truncates the ellipsis.

Things to note

  • The table must be set width , otherwise the fixed layout may perform abnormally.
  • The column width is mainly determined by the cells in the first row (usually thead or first row tr ) . So it is recommended to set the width on th or first line td .
  • If the first row has no width set, the browser will distribute the column width evenly.
  • When the content is too long, remember to control the display with white-space: nowrap and overflow: hidden .

Common application scenarios

  • Background management forms (such as user list, order table)
  • Data display interface with fixed column width
  • Tables that require ellipsis to truncate long text
  • Large performance-sensitive tables (hundreds of thousands of rows)

Basically that's it. table-layout: fixed seems like a trick, but it is very practical in actual development, especially when you don't want "extra-long content of a certain cell" to ruin the entire table layout.

css table-layout fixed example

The above is the detailed content of css table-layout fixed example. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Building Immutable Objects in PHP with Readonly Properties Building Immutable Objects in PHP with Readonly Properties Jul 30, 2025 am 05:40 AM

ReadonlypropertiesinPHP8.2canonlybeassignedonceintheconstructororatdeclarationandcannotbemodifiedafterward,enforcingimmutabilityatthelanguagelevel.2.Toachievedeepimmutability,wrapmutabletypeslikearraysinArrayObjectorusecustomimmutablecollectionssucha

Building RESTful APIs in Java with Jakarta EE Building RESTful APIs in Java with Jakarta EE Jul 30, 2025 am 03:05 AM

SetupaMaven/GradleprojectwithJAX-RSdependencieslikeJersey;2.CreateaRESTresourceusingannotationssuchas@Pathand@GET;3.ConfiguretheapplicationviaApplicationsubclassorweb.xml;4.AddJacksonforJSONbindingbyincludingjersey-media-json-jackson;5.DeploytoaJakar

A Developer's Guide to Maven for Java Project Management A Developer's Guide to Maven for Java Project Management Jul 30, 2025 am 02:41 AM

Maven is a standard tool for Java project management and construction. The answer lies in the fact that it uses pom.xml to standardize project structure, dependency management, construction lifecycle automation and plug-in extensions; 1. Use pom.xml to define groupId, artifactId, version and dependencies; 2. Master core commands such as mvnclean, compile, test, package, install and deploy; 3. Use dependencyManagement and exclusions to manage dependency versions and conflicts; 4. Organize large applications through multi-module project structure and are managed uniformly by the parent POM; 5.

css dark mode toggle example css dark mode toggle example Jul 30, 2025 am 05:28 AM

First, use JavaScript to obtain the user system preferences and locally stored theme settings, and initialize the page theme; 1. The HTML structure contains a button to trigger topic switching; 2. CSS uses: root to define bright theme variables, .dark-mode class defines dark theme variables, and applies these variables through var(); 3. JavaScript detects prefers-color-scheme and reads localStorage to determine the initial theme; 4. Switch the dark-mode class on the html element when clicking the button, and saves the current state to localStorage; 5. All color changes are accompanied by 0.3 seconds transition animation to enhance the user

python parse date string example python parse date string example Jul 30, 2025 am 03:32 AM

Use datetime.strptime() to convert date strings into datetime object. 1. Basic usage: parse "2023-10-05" as datetime object through "%Y-%m-%d"; 2. Supports multiple formats such as "%m/%d/%Y" to parse American dates, "%d/%m/%Y" to parse British dates, "%b%d,%Y%I:%M%p" to parse time with AM/PM; 3. Use dateutil.parser.parse() to automatically infer unknown formats; 4. Use .d

How to use Java MessageDigest for hashing (MD5, SHA-256)? How to use Java MessageDigest for hashing (MD5, SHA-256)? Jul 30, 2025 am 02:58 AM

To generate hash values using Java, it can be implemented through the MessageDigest class. 1. Get an instance of the specified algorithm, such as MD5 or SHA-256; 2. Call the .update() method to pass in the data to be encrypted; 3. Call the .digest() method to obtain a hash byte array; 4. Convert the byte array into a hexadecimal string for reading; for inputs such as large files, read in chunks and call .update() multiple times; it is recommended to use SHA-256 instead of MD5 or SHA-1 to ensure security.

VSCode settings.json location VSCode settings.json location Aug 01, 2025 am 06:12 AM

The settings.json file is located in the user-level or workspace-level path and is used to customize VSCode settings. 1. User-level path: Windows is C:\Users\\AppData\Roaming\Code\User\settings.json, macOS is /Users//Library/ApplicationSupport/Code/User/settings.json, Linux is /home//.config/Code/User/settings.json; 2. Workspace-level path: .vscode/settings in the project root directory

css dropdown menu example css dropdown menu example Jul 30, 2025 am 05:36 AM

Yes, a common CSS drop-down menu can be implemented through pure HTML and CSS without JavaScript. 1. Use nested ul and li to build a menu structure; 2. Use the:hover pseudo-class to control the display and hiding of pull-down content; 3. Set position:relative for parent li, and the submenu is positioned using position:absolute; 4. The submenu defaults to display:none, which becomes display:block when hovered; 5. Multi-level pull-down can be achieved through nesting, combined with transition, and add fade-in animations, and adapted to mobile terminals with media queries. The entire solution is simple and does not require JavaScript support, which is suitable for large

See all articles