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.

<<: How to make a tar file of wsl through Docker

>>: Example code for building an admin dashboard layout using CSS and JavaScript

Perfectly install Mac OS10.14 under Win10 VM virtual machine (graphic tutorial)

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

Perfectly install Mac OS10.14 under Win10 VM virtual machine (graphic tutorial)

Some problems you may encounter when installing MySQL

How to view files in Docker image

Detailed steps to install MySQL on CentOS 7

The ultimate solution for playing background music in Firefox browser (Chrome multi-browser compatible)

How to assign default values to fields when querying MySQL

Vue Router vue-router detailed explanation guide

A brief discussion on HTML special character encoding CSS3 content: "I am a special symbol"

Detailed explanation of the use of IF(), IFNULL(), NULLIF(), and ISNULL() functions in MySQL

MySql fuzzy query json keyword retrieval solution example

Recommend

jQuery implements breathing carousel

Introduction to SSL certificate installation and deployment steps under Nginx

Solve the conflict between docker and vmware

MySQL 8.0.12 winx64 decompression version installation graphic tutorial

Postman data encryption and decryption to implement APP login interface simulation request

How to use CSS to display multiple images horizontally in the center

A brief understanding of the three uses of standard SQL update statements

Detailed comparison of Ember.js and Vue.js

Develop calculator example code using native javascript

MySQL SQL statement analysis and query optimization detailed explanation

There are text and pictures in the a tag. How to hide the text and only show the picture?

Implementation process of the magnifying glass effect in the Javascript example project

Native JavaScript implementation of progress bar

Using MySQL database with Python 3.4 under Windows 7

Docker builds python Flask+ nginx+uwsgi container