Perhaps when I get this name in this article, someone will ask: Why are you still following tables? That's already outdated... Hurry up Xhtml...div is good...ul is good...ol is good...dl is good...dl is good...this is finished, I don't know what else is better.
Is the table really outdated? Do you really know table? Do you really use table?
We are not what we need to do to fight a verbal battle, so let it be left to those who have plenty of time.
Back to the topic:
I don’t remember when someone used a table to simulate DataGrid and said, why can’t td texts that exceed the fixed width be hidden, but will directly wrap the line?
Yes, it does, like:
Run the code as above and you will find that text in the cell that exceeds the fixed width will not be hidden, but will be displayed with a new line. Obviously, this is not what I mean.
It seems that this seems to be a feature of the table. It cannot support the combination of {width:*px;white-space:nowrap;overflow:hidden;} very well. In the final analysis, the white-space:nowrap does not work, so it seems that overflow:hidden is invalid. {Note: If it is a series of meaningless characters, it can take effect. For example: <td class=col1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>, at this time, {white-space:nowrap} is not needed to force it to be displayed in a line, because this series of a will be considered as a word without a line break, so a beyond .col1 width will be hidden}
[Solution 1:]
Later, someone mentioned that using percentage width is enough. After testing, it is indeed possible. I slightly modified the styles of several lines of 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 be obtained.
In fact, using percentage width does solve the problem of hiding this text, but this doesn't seem to be the best solution to be desired, because sometimes we need a fixed width, not a percentage width.
The root of all this lies in how to make the text in the cell be displayed in one line without wrapping lines.
[Solution 2:]
To meet this requirement, in addition to using styles, we may also think of a label that we haven't used for a long time. The function of this element is to force the content to be displayed on one line. The above code is modified as follows, and the others remain unchanged:
<table border=1 cellpacing=0 summary=Look back and take a look at Table: TD also plays 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>Xunchi 4 platform, outstanding cost-effectiveness, beautiful appearance</nobr></td>
</tr>
</table>
After making this modification, you will find that the effect is indeed achieved. Should you be excited? No, this doesn't seem to be the best solution, because after all, it's a bit unpleasant to use an element mark that has not been used for a long time and is not recommended.
Following this idea, I have considered this problem from a different perspective and found that the problem can be solved easily.
Since we cannot simply add white-space:nowrap to th and td in a fixed width cell, then what about we add another marker element to a fixed width cell?
Best Solution:
Running the above code will find that this approach is OK, and in terms of the simplicity, readability and rationality of the code, it is better than the previous solutions.
{Students who have not done hiding content exceeding 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 own reason.
I will continue to write some articles about tables later, and also serve as self-entertainment.