报表模块格td设定宽度失效自始至终有內部的內容

在做table网页页面时,有时对td设定的宽度是失效的,td的宽度自始至终有內部的內容撑开,能够设定padding,但立即设定width却失效,下面大家来实际看下这个示例:

拷贝编码
编码以下:

<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;}

 
大家能够看到,类div1中的第1个模块格尽管设定了宽度,可是确是失效的。模块格內容自始至终由內容而决策,那末既然是由內容决策的那末大家就想方法让“內容”把模块格撑开,这样就可以了。

大家能够在td中加个div,随后给div设定宽度,来试1下:

改动类div1中的1一部分编码:

拷贝编码
编码以下:

<td width="100px" style="width: 100px !important;">1000800</td>

改动为

拷贝编码
编码以下:

<td><div>1000800</div></td>

随后在款式里写入:

拷贝编码
编码以下:

td div {
width:100px;
}

更新网页页面,此时效性果以下:
 
大家能够看到类div1中的模块格的宽度早已起效了。