Set the width of the table to be fixed without changing the text

Time:2020-6-22

After the width of table in the page is set to width = “600px”, the width is still not fixed. If the text is too long, it will not wrap, which makes the table deformed.

terms of settlement:

1. Set the width in table, absolute width and relative width

table-layout:fixed ;
With this property set, all other TD’s are of the same width.

After this operation, the width of the table is fixed, but if the articles inside are long, the text will be overwritten

terms of settlement:

Add style = “word” to TD- wrap:break-word; “If you don’t want to wrap the line, you can set the content beyond to be hidden and use ellipsis instead:

Add on TD

Copy code

The code is as follows:

overflow:hidden;
white-space:nowrap;

text- overflow:ellipsis; (currently only passed IE8 test)
Recommended method (2013-11-14 by Zhang Lei) use div to control TD content

Add in TD

(1) Text over width and height is automatically hidden

Copy code

The code is as follows:

<div style=”width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;”>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

(2) Set the width of td to exceed the length of auto wrap

Copy code

The code is as follows:

<td><div style=”width:100px;word-wrap:break-word;” >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</td>