Fixed table width table-layout: fixed
|
In order to make the table fill the screen (the remaining blank area), its width attribute is often defined as: 100%, and the cells are also defined using percentages. But this will cause a problem: If the text in the cell exceeds the width limit, it will automatically wrap and the height will automatically increase, resulting in an uneven and ugly style for the entire table. The obvious solution is to disable text wrapping: white-space:nowrap; overflow:hidden; So easy! But the effect is still unexpected: all the text is displayed in one line, the width is automatically widened, and even exceeds the parent container. Overflow does not work at all! What's going on? Is it because of the percentage? But if you use a static fixed width, you lose the flexibility of the table. So, the ultimate solution was found without much effort: Fixed table width: table-layout: fixed; By the way, I made a simple effect diagram, please refer to it:  |
>>: Example code of how CSS matches multiple classes
Recommend
A brief talk about Mysql index and redis jump table
summary During the interview, when discussing abo...
An example of dynamically implementing different styles of data in a column of el-table of element ui
Problem Description In the framework of Ele.me UI...
MySQL database implements MMM high availability cluster architecture
concept MMM (Master-Master replication manager fo...
How to write the parent and child directories of HTML relative paths
How to indicate the parent directory ../ represent...
Proxy realizes the principle of two-way binding of Vue3 data
Table of contents 1. Advantages of proxy vs. Obje...
Significantly optimize the size of PNG images with CSS mask (recommended)
This article is welcome to be shared and aggregat...
How to install and use Ubuntu Docker
Table of contents 1. Automatic installation using...
Install Tomcat on Linux system and configure Service startup and shutdown
Configure service startup and shutdown in Linux s...
MySQL Series 8 MySQL Server Variables
Tutorial Series MySQL series: Basic concepts of M...
A brief discussion on CSS3 animation jamming solutions
Why is it stuck? There is a premise that must be ...
Detailed explanation of JS memory space
Table of contents Overview 1. Stack and Heap 2. V...
CSS specification BEM CSS and OOCSS sample code detailed explanation
Preface During project development, due to differ...
Implementation of restoring data by directly copying files in the data directory in mysql
mysql copies the files in the data directory to r...
The best explanation of HTTPS
Good morning everyone, I haven’t updated my artic...
Pure JavaScript to implement the number guessing game
Develop a number guessing game that randomly sele...