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

CSS3 uses transform deformation combined with events to complete fan-shaped navigation

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

CSS3 uses transform deformation combined with events to complete fan-shaped navigation

js uses the reduce method to make your code more elegant

Vue form post request combined with Servlet to realize file upload function

Difference between HTML ReadOnly and Enabled

Detailed explanation of Frp forced redirection to https configuration under Nginx

JavaScript implements page scrolling animation

12 Laws of Web Design for Clean Code [Graphic]

Introduction to commonly used fonts on the Web (fonts supported by iOS and Android browsers)

Vue ElementUI Form form validation

WeChat Mini Program User Authorization Best Practices Guide

Recommend

Solve the problem that ElementUI custom CSS style does not take effect

Examples of using MySQL pessimistic locking and optimistic locking

Vue makes a simple random roll call

Two ways to build a private GitLab using Docker

Zabbix configuration DingTalk alarm function implementation code

Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging

Solve the problem of starting two ports that occupy different ports when docker run

Vue implements login verification code

Ubuntu 18.04 one-click upgrade of all third-party Python packages and installation of Python packages

vsftpd virtual user based on MySql authentication

Introduction and usage examples of ref and $refs in Vue

Detailed explanation of the solution to the problem of merging rows and columns in tables in HTML

jQuery plugin to achieve carousel effect

Vue3.0 uses the vue-grid-layout plug-in to implement drag layout

How to install Elasticsearch7.6 cluster in docker and set password