Web page production TD can also overflow hidden display

Perhaps when I name this article like this, someone will ask: Why are you still paying attention to tables? They are already out of date... Hurry up and use Xhtml... div is good... ul is good... ol is good... dl is good... That's it, I don't know what else is good.

Are tables really outdated? Do you really understand tables? Do you really know how to use tables?

We are not here to engage in wars of words; let's leave that to those who have plenty of time.

Let’s get back to the point:

I don't remember when it was, but someone asked me when using table to simulate DataGrid, why the text in td that exceeds the fixed width cannot be hidden, but will be wrapped directly?

Yes, it is true, as shown in:

Tip: You can modify some of the code before running

Run the above code and you will find that the text in the cell that exceeds the fixed width will not be hidden, but will be displayed in a new line. Obviously, this is not my intention.

It seems that this seems to be a feature of table. It cannot support the combination of {width:*px;white-space:nowrap;overflow:hidden;} very well. In the final analysis, white-space:nowrap does not work, so it seems that overflow:hidden is invalid. {Note: This will work if it is a series of meaningless characters, for example: <td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>, then there is no need for {white-space:nowrap} to force it to be displayed in one line, because this series of a's will be considered as one word and will not wrap, so the a's that exceed the width of .col1 will be hidden}

[Solution 1:]

Later, someone mentioned that using percentage width would be fine. After testing, it really works. Slightly modify the style of a few lines in the first paragraph, and keep the others unchanged:

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

After running the modified code, you will find that the text that exceeds the width is indeed hidden, and the desired effect seems to be achieved.

In fact, using percentage width can indeed solve the problem of text hiding, but this does not seem to be the best solution, because sometimes we need a fixed width rather than a percentage width.

The root of all this lies in how to make the text in the cell display in one line without wrapping.

[Solution 2:]

To achieve this requirement, in addition to using styles, we may also think of a tag that has not been used for a long time <nobr>. The function of this element is to force the content to be displayed in one line. The above code is modified as follows, and the rest remains unchanged:

<table border="1" cellspacing="0" summary="Looking back at Table: TD also uses overflow:hidden">
<tr>
<td class="col1"><nobr>Shenzhou Elegant Q400N</nobr></td>
<td class="col2"><nobr>Elegant Q400N, using Intel Core2 Duo (Merom) T5450 (1.66G) processor</nobr></td>
<td class="col3"><nobr>Centrino 4 platform, outstanding cost performance, beautiful appearance</nobr></td>
</tr>
</table>

After making this modification, you will find that the effect is indeed achieved. Shouldn’t you be excited? No, this doesn’t seem to be the best solution, because after all, it uses an element tag that has not been used for a long time and is not recommended, which makes people feel a little uncomfortable.

Following this line of thought, I considered the problem from a different angle and found that the problem was easily solved.

Since we cannot simply add white-space:nowrap to th and td in a cell with a fixed width, how about adding a marker element to the cell with a fixed width?

Best Practices:

Tip: You can modify some of the code before running

Running the above code, you will find that this approach is feasible, and is better than the previous solutions in terms of code simplicity, readability, and rationality.

{For those who have not yet tried to hide the content of cells that exceed a fixed width, you can play with it on your machine first, and then read this article.}

In fact, table is an interesting and highly playable thing. We should not look at it with tinted glasses, because it has its reason for existence.

I will continue to write some articles about tables, also for my own entertainment.

<<: How to ensure the overall user experience

>>: Basic tutorial on using explain statement in MySQL

How to display percentage and the first few percent in MySQL

Web page production TD can also overflow hidden display

How to display percentage and the first few percent in MySQL

Web designers also need to learn web coding

Linux Disk Quota Management Graphical Example

MySQL 8.0.12 winx64 decompression version installation graphic tutorial

Linux performance monitoring tool nmon installation and usage tutorial analysis

How to view and terminate running background programs in Linux

MySQL sorting Chinese details and examples

Detailed explanation of CSS complex selectors and CSS font styles and color attributes

Implementing shopping cart function based on vuex

Several ways to implement inheritance in JavaScript

Recommend

Detailed explanation of installing redis in docker and starting it as a configuration file

How to quickly install nginx under Windows and configure it to start automatically

Solution to the error in compiling LVGL emulator on Linux

Tips for implementing multiple borders in CSS

Maven project remote deployment && How to configure database connection using tomcat

How to change the website accessed by http to https in nginx

10 performance configuration items that need to be adjusted after installing MySQL

This article will help you thoroughly understand the specific use of cgroup in Docker

Looking at Tomcat's thread model from the connector component - BIO mode (recommended)

Detailed explanation of three methods of JS interception string

JavaScript to achieve the effect of clicking on the self-made menu

Node+express to achieve paging effect

15 Linux Command Aliases That Will Save You Time

How to install Jenkins on CentOS 8

Detailed explanation of MySQL high availability architecture