Web page making TD can also overflow hidden display

Time:2021-9-15

Maybe as soon as my article takes such a name, someone will ask: Why are you still paying attention to table? It’s already out of date… Hurry XHTML… Div good… UL good… Ol good… DL good… It’s over. I don’t know what else to do.

Is table really out of date? Do you really know about table? Can you really use table?

We don’t want to fight a water war. Leave it to those who have plenty of time.

Back to business:

I don’t remember when someone said when simulating DataGrid with table, why can’t text with TD exceeding the fixed width be hidden, but will wrap directly?

Yes, it is. For example:


Tip: you can modify some code before running

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

It seems that this is a feature of table. It can’t support the combination of {width: * PX; white space: nowrap; overflow: hidden;}. In the final analysis, white space: nowrap doesn’t work, so it seems that overflow: Hidden fails. {note: it can take effect if it is a series of meaningless characters, for example: < TD class = “col1” > aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

[solution 1:]

Later, it was mentioned that it was OK to use percentage width. After testing, it was OK. Slightly modify the style of several lines in the first paragraph, and the others remain unchanged:

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

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

In fact, the use of percentage width can indeed solve the problem of text hiding, but it doesn’t seem to be the best solution, because sometimes we need a fixed width instead of percentage width.

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

[solution 2:]

To meet this requirement, in addition to using styles, we may also think of a label < nobr > that has not been used for a long time. The function of this element is to force the content to be displayed on one line. The above codes are modified as follows, while others remain unchanged:

< table border = “1” cellspacing = “0” summary = “look back and see table: TD also plays overflow: hidden” >
<tr>
< TD class = “col1” > < nobr > Shenzhou elegant q400n < / nobr ></td>
< TD class = “col2” > < nobr > elegant q400n, Intel Core2 Duo (Merom) t5450 (1.66g) processor < / nobr ></td>
< TD class = “col3” > < nobr > Centrino 4 platform, outstanding cost performance and beautiful appearance < / nobr ></td>
</tr>
</table>

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

Along this line of thought, I changed my perspective to consider this problem and found that the problem was solved easily.

Since we can’t simply add white space: nowrap to th and TD in a cell with a fixed width, what about adding a marker element in a cell with a fixed width?

Best solution:


Tip: you can modify some code before running

Running the above code, you will find that such an approach is possible, and it is better than the previous schemes in terms of code simplicity, readability and rationality.

{students who haven’t hidden more than a fixed width for cells can play on the machine first, and then read this article}

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

After that, I will continue to write some articles about table for self entertainment.