Set the width of the table to be fixed so that it does not change with the text

After setting the table width in the page to width="600px", the width is still not fixed. The text does not wrap when it is too long, which deforms the table.

Solution:

1. Table sets width, both absolute and relative width are acceptable

table-layout:fixed;
With this property set, all remaining td's will have the same width.

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

Solution:

Add style="word-wrap:break-word;" to the td to wrap the text. If you don't want to wrap the text, you can hide the content that exceeds the limit and replace it with an ellipsis:

Add above td

Copy code

The 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 will be automatically hidden if it exceeds the width and height

Copy code

The code is as follows:

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

(2) Set the TD width to automatically wrap when it exceeds the length

Copy code

The code is as follows:

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

<<: Explore how an LED can get you started with the Linux kernel

>>: Introduction to document.activeELement focus element in JavaScript

Install Centos7 using Hyper-v virtual machine

Set the width of the table to be fixed so that it does not change with the text

Install Centos7 using Hyper-v virtual machine

How to implement a single file component in JS

Detailed introduction and usage examples of map tag parameters

How to add Nginx proxy configuration to allow only internal IP access

Solution to multiple 302 responses in nginx proxy (nginx Follow 302)

mysql executes sql file and reports error Error: Unknown storage engine'InnoDB' solution

Flex layout realizes the layout mode of upper and lower fixed and middle sliding

Detailed example of deploying Nginx+Apache dynamic and static separation

Tutorial on installing mongodb under linux

Solution to mysql error when modifying sql_mode

Recommend

12 Javascript table controls (DataGrid) are sorted out

Detailed steps for debugging VUE projects in IDEA

Div adaptive height automatically fills the remaining height

Master the CSS property display:flow-root declaration in one article

Application example tutorial of key in Vue page rendering

How to implement a password strength detector in react

How to install Linux flash

Detailed steps to enable SourceGuardian (sg11) encryption component on Linux virtual hosts

Do you know the common MySQL design errors?

How to restore a database and a table from a MySQL full database backup

How to understand Vue's simple state management store mode

How to install Odoo12 development environment on Windows 10

Use overflow: hidden to disable page scrollbars

How to display div on object without being blocked by object animation

Ubuntu 16.04 mysql5.7.17 open remote port 3306