Setting the width of table cell td is invalid and the internal content always stretches it

When making a table page, sometimes the width set for td is invalid. The width of td is always expanded by the internal content. You can set padding, but setting width directly is invalid. Let's take a closer look at this example:

Copy code

The code is as follows:

<div>
<table border="1px">
<tr>
<td width="100px" style="width: 100px !important;">1000800</td>
<td>1000000</td>
<td>1000000</td>
</tr>
<tr>
<td>1000000</td>
<td>10000300</td>
<td>1000000</td>
</tr>
</table>
</div>
<table border="1px">
<tr>
<td width="100px">1000000</td>
<td>1000000</td>
<td>1000000</td>
</tr>
<tr>
<td>1000000</td>
<td>10000300</td>
<td>1000000</td>
</tr>
</table>
* {margin: 0; padding: 0;}
.div1 {position: relative; width: 150px; height: 100px; overflow: scroll; border: 1px solid red;}

We can see that although the width of the first cell in class div1 is set, it is invalid. The cell content is always determined by the content. Since it is determined by the content, we should find a way to let the "content" expand the cell. That's it.

We can add a div in td and set the width of the div. Let's try it:

Modify part of the code in class div1:

Copy code

The code is as follows:

Modified to

Copy code

The code is as follows:

Then write in the style:

Copy code

The code is as follows:

td div {
width:100px;
}

Refresh the page, and the effect is as follows:

We can see that the width of the cells in class div1 has taken effect.

Detailed explanation of the installation process of Jenkins on CentOS 7

Blog

Setting the width of table cell td is invalid and the internal content always stretches it

Causes and solutions for MySQL data loss

Complete list of CentOS7 firewall operation commands

Detailed explanation of the installation process of Jenkins on CentOS 7

Solve the problem of docker log mounting

Example of using negative margin to achieve average layout in CSS

How to build LNMP environment on Ubuntu 20.04

vue element el-transfer adds drag function

MySQL Packet for query is too large problem and solution

Example code for implementing hexagonal borders with CSS3

Analysis of the principle of using PDO to prevent SQL injection

Recommend

Detailed explanation of fetch network request encapsulation example

Layim in javascript to find friends and groups

Solution to the "No such file or directory" prompt when executing executable files in Linux

Graphic tutorial on installing CentOS7 on VMware 15.5

How to connect to Alibaba Cloud Ubuntu 16.04 server from local Windows remote desktop

Better looking CSS custom styles (title h1 h2 h3)

Usage and performance optimization techniques of aggregate function count in MySQL

Docker Detailed Illustrations

Example code of Vue3 encapsulated magnifying glass component

Installation tutorial of mysql 8.0.11 compressed version under win10

Two solutions for Vue package upload server refresh 404 problem

Docker private repository management and deletion of images in local repositories

Analysis of Linux boot system methods

XHTML three document type declarations

CSS Tutorial: CSS Attribute Media Type