Home > Article > Web Front-end > How to solve the problem that the width setting of table cell td is invalid
This time I will bring you how to solve the problem of invalid width setting of table cell td. What should be solved if the width setting of table cell td is invalid? .
When making table pages, sometimes the width set for td is invalid. The width of td is always stretched by the internal content. You can set
, but set the width directly. But it is invalid. Let's take a look at this example in detail: <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 content of the cell is always determined by the content, so since it is determined by the content, we have to find a way to let the "content" expand the cell, and that's it.
We can add a div in td, and then set the width of the div, let’s try it:
Modify part of the code in class div1:
<td width="100px" style="width: 100px !important;">1000800</td>
<td><div>1000800</div></td>
and then write in the style:
td div { width:100px; }
I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
htmlHow to control the properties of a hyperlink when opening a new windowProgressive enhancement in css3 And how to use graceful degradationHow should the new units vw, vh, vmin, vmax of css3 be usedThe above is the detailed content of How to solve the problem that the width setting of table cell td is invalid. For more information, please follow other related articles on the PHP Chinese website!