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>

HTML+CSS to add a delete cross and a picture delete button in the upper right corner of the picture

Blog

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

Mysql Sql statement exercises (50 questions)

Complete example of vue polling request solution

HTML+CSS to add a delete cross and a picture delete button in the upper right corner of the picture

Practical explanation of editing files, saving and exiting in linux

Summary of knowledge points about events module in Node.js

Centos7 startup process and Nginx startup configuration in Systemd

MySQL implements an example method of logging in without a password

How to use Docker-compose to deploy Django applications offline

Mini Program Custom TabBar Component Encapsulation

Web Design: When the Title Cannot Be Displayed Completely

Recommend

Tips for implementing multiple borders in CSS

Linux yum package management method

Detailed explanation of the process of troubleshooting the cause of high CPU usage under Linux

Docker deploys Mysql, .Net6, Sqlserver and other containers

HTML Nine-grid Layout Implementation Method

A brief analysis of Linux to check the firewall status and the status of the ports open to the outside world

In-depth understanding of javascript class array

Several methods and advantages and disadvantages of implementing three-column layout with CSS

Reasons and solutions for not being able to detect array changes in Vue2

Implementing carousel effects with JavaScript

css Get all elements starting from the nth one

The perfect solution for forgetting the password in mysql8.0.19

Steps for IDEA to integrate Docker to achieve remote deployment

MySQL starts slow SQL and analyzes the causes

A brief analysis of MySQL explicit type conversion