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

MySQL series 9 MySQL query cache and index

Web page production TD can also overflow hidden display

MySQL series 9 MySQL query cache and index

Detailed explanation of Linux environment variable configuration strategy

How to implement scheduled automatic backup of MySQL under CentOS7

HTML table markup tutorial (37): background image attribute BACKGROUND

How to remove the dotted border when clicking a link in FireFox

Detailed explanation of jQuery method attributes

5 basic skills of topic page design (Alibaba UED Shanmu)

Tomcat configuration and how to start it in Eclipse

Problems encountered by MySQL nested transactions

Chrome 4.0 supports GreaseMonkey scripts

Recommend

Detailed explanation of how to pass values between react hooks components (using ts)

Solution to the automatic termination of docker run container

An example of how to use nginx to configure multiple laravel projects with one domain name

Are the value ranges of int(3) and int(10) the same in mysql

This article teaches you how to import CSS like JS modules

How to use the Linux nl command

Use CSS blend modes and SVG to dynamically change the color of your product images

Some experience in building the React Native project framework

How to export mysql query results to csv

MySQL view principles and basic operation examples

Detailed explanation of the process of deleting the built-in version of Python in Linux

Vue Beginner's Guide: Creating the First Vue-cli Scaffolding Program

Example code for using text-align and margin: 0 auto to center in CSS

The phenomenon of margin-top collapse and the specific solution

Summary of 10 must-see JavaScript interview questions (recommended)