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

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

WBOY

Release： 2016-05-16 16:42:15

Original

1981 people have browsed it

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:

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:

提示：您可以先修改部分代码再运行

　　运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

　　{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}

　　其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。

　　之后会继续写一些关于table的文章，也作自娱之用。