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

Use of Vue filters and custom instructions

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

Use of Vue filters and custom instructions

Reasons and solutions for failure of dynamically added routing pages in Vue when refreshing

Detailed explanation of the use of base tag in HTML

Detailed explanation of the basic use of react-navigation6.x routing library

Implementing circular scrolling list function based on Vue

Implementation of Mysql User Rights Management

Details of watch monitoring properties in Vue

Summary of MySQL's commonly used SQL statements for creating tables, adding fields, modifying fields, and adding indexes

25 CSS frameworks, tools, software and templates shared

Things to note when designing web pages for small-screen mobile devices

Recommend

Html sample code for reading and displaying pictures in a local folder

Introduction and architecture of Apache Arrow, a high-performance data format library package on JVM (Gkatziouras)

MySQL dual-machine hot standby implementation solution [testable]

Detailed explanation of how to use Docker to deploy Django+MySQL8 development environment

How to configure static network connection in Linux

How to install Docker using scripts under Linux Centos

About the location of the H1 tag in XHTML

MySQL DML language operation example

An article teaches you how to implement a recipe system with React

MySql index improves query speed common methods code examples

The difference between MySQL execute, executeUpdate and executeQuery

Websocket+Vuex implements a real-time chat software

Linux CentOS6.9 installation graphic tutorial under VMware

8 Reasons Why You Should Use Xfce Desktop Environment for Linux

Summary of MySQL common SQL statements including complex SQL queries