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

How to use Docker plugin to remotely deploy projects to cloud servers in IDEA

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

How to use Docker plugin to remotely deploy projects to cloud servers in IDEA

About input file control and beautification

HTML drag and drop function implementation code

Vue project configures webpack-obfuscator to implement code encryption and obfuscation

Front-end development general manual (including tools, websites, experience, etc.)

Analysis of the difference between the usage of left join setting conditions in on and where in mysql

How to deploy SSL certificate in windows apache environment to make the website support https

Service management of source package installation under Linux

How to automatically execute the task schedule crontab every few minutes in a specified time period on Linux

Detailed example of jQuery's chain programming style

Recommend

Understand the use of CSS3's all attribute

Solve the problem of Chinese garbled characters when inserting data into MySQL by Tomcat under Linux

Summary of Form Design Techniques in Web Design

Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL

A small question about the execution order of SQL in MySQL

WeChat applet custom scroll-view example code

JavaScript implements the generation of 4-digit random verification code

TypeScript installation and use and basic data types

Detailed explanation of Web front-end performance optimization: resource merging and compression

Complete steps to use samba to share folders in CentOS 7

Sql query MySql database table name and description table field (column) information

MySQL log trigger implementation code

How to write asynchronous tasks in modern JavaScript

JavaScript design pattern learning adapter pattern

Summary of @ usage in CSS (with examples and explanations)