Home >Web Front-end >HTML Tutorial >Set the width in the table so that it does not change with the text so that it is fixed_HTML/Xhtml_Web page production

Set the width in the table so that it does not change with the text so that it is fixed_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:38:521648browse

After the table width on the page is set to width="600px", the width is still not fixed. If the text is too long, it will not wrap and the table will be deformed.

Solution:

1.table Set the width, both absolute width and relative width can be used

table-layout:fixed;
Set this attribute, and all other td All are the same width.

After doing this, the width of the table is fixed, but if the article inside is very long, the text will cover it

Solution:

Add style=" in td word-wrap:break-word;" Just wrap the word automatically. If you don’t want to wrap the line, you can hide the excess content and replace it with ellipsis:

Add

Copy codeThe code is as follows:
overflow:hidden;
white-space:nowrap;

text-overflow:ellipsis; (currently only tested in IE8)
Recommended method (2013-11-14 by Zhang Lei) Use div to control the content of TD

Add in TD

(1) Text that exceeds the width and height will be automatically hidden


Copy the codeThe code is as follows:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa& lt;/div>

(2) Set automatic line wrapping when the width of td exceeds the length


Copy the codeThe code is as follows:
/td>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn