Web page production TD can also overflow and hide the display_HTML/Xhtml_Web page production

Maybe as soon as I give this article such a name, someone will ask: Why are you still paying attention to table? It is already out of date... Hurry up Xhtml... div is good... ul is good... ol is good... dl is good... it's over, no It’s better to know what else.

Is table really outdated? Do you really understand table? Do you really know how to use tables?

War of words is not what we want to do, leave it to those who have plenty of time.

Back to the subject:

I don’t remember when someone was using a table to simulate the DataGrid and asked why the text in the td that exceeds the fixed width cannot be hidden, but will wrap directly?

Yes, this is indeed the case, such as:

<style type="text/css"> table {width:500px;table-layout:fixed;} .col1 {width:100px;} .col2 {width:200px;} .col3 {width:200px;} td {white-space:nowrap;overflow:hidden;} </style> <table border="1" cellspacing="0" summary="Look back at Table: TD also plays overflow:hidden"> <tr> <td class="col1">Shenzhou Elegant Q400N</td> <td class="col2">Elegant Q400N, using Intel Core2 Duo(Merom) T5450(1.66G) processor</td> <td class="col3">Centrino 4 platform, outstanding cost performance, beautiful appearance</td> </tr> </table>

Tip: You can modify part 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 is a feature of the table. It cannot well support the combination of {width:*px;white-space:nowrap;overflow:hidden;}. In the final analysis, it is white-space: nowrap doesn't work, so it seems that overflow:hidden is invalid. {Note: If it is a series of meaningless characters, it can take effect, for example: & lt; td } To force it to be within a line Display, because this series of a's will be recognized as one word without line breaks, so a's that exceed the width of .col1 will be hidden}

　[Solution 1:]

Later someone It was mentioned that using percentage width is enough. After testing, it is indeed possible. Slightly modify the style of a few lines in the first paragraph and leave 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. The effect seems to be obtained.

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, not a 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 achieve this requirement, in addition to using styles, we may also think of a tag that has not been used for a long time. The function of this element is to force content Displayed in one line. Make the following modifications to the above code, leaving everything else unchanged:

Shenzhou Elegant Q400N

Centrino 4 platform, outstanding Great value for money, beautiful appearance

After making this modification, you will find that the effect is indeed achieved, Is it time to be excited? No, this does not seem to be the best solution, because after all, it is a bit unpleasant to use an element tag that has not been used for a long time and is not recommended.

Following this idea, I considered this 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 fixed-width cell, then what if we add a mark element to the fixed-width cell?

Best solution:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Language" content="gb2312"> <title></title>