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
CSS achieves the effect of rotating the outermost layer of a multi-layer nested structure while keeping other layers unchanged
There is such a scenario: a circular container, t...
Writing a rock-paper-scissors game in JavaScript
This article shares the specific code for writing...
Vue implements the operation code of clicking a button to download a file (backend Java)
In the previous article, I introduced the functio...
CSS3 Bezier Curve Example: Creating Link Hover Animation Effects
We will use CSS3 animated transitions to create a...
MYSQL database basics - Join operation principle
Join uses the Nested-Loop Join algorithm. There a...
How to set font color in HTML and how to get accurate font color in HTML using PS
1. HTML font color setting In HTML, we use the fo...
The process of installing and configuring nginx in win10
1. Introduction Nginx is a free, open source, hig...
Solution to high CPU usage of Tomcat process
Table of contents Case Context switching overhead...
10 Things Excellent Web Developers Must Know to Improve Their Development Skills
"Development is more than just writing code&q...
Vue Element-ui form validation rule implementation
Table of contents 1. Introduction 2. Entry mode o...
Cleverly use CSS3's webkit-box-reflect to achieve various dynamic effects
In an article a long time ago, I talked about the...
Install mysql offline using rpm under centos 6.4
Use the rpm installation package to install mysql...
Install MySQL 5.7.17 in win10 system
Operating system win10 MySQL is the 64-bit zip de...
Detailed explanation of the use of Linux seq command
01. Command Overview The seq command is used to g...
Detailed explanation of the usage of DECIMAL in MySQL data type
Detailed explanation of the usage of DECIMAL in M...