表格單元格td設(shè)置寬度無效應(yīng)該如何處理

在做table頁面時(shí)，有時(shí)對td設(shè)置的寬度是無效的，td的寬度始終有內(nèi)部的內(nèi)容撐開，可以設(shè)置padding，但直接設(shè)置width卻無效，下面我們來具體看下這個(gè)示例：

<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中的第一個(gè)單元格雖然設(shè)置了寬度，但是卻是無效的。單元格內(nèi)容始終由內(nèi)容而決定，那么既然是由內(nèi)容決定的那么我們就想辦法讓“內(nèi)容”把單元格撐開，這樣就行了。

我們可以在td中加個(gè)div，然后給div設(shè)置寬度，來試一下：

修改類div1中的一部分代碼：

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

修改為

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

然后在樣式里寫入：

td div { 
width:100px; 
}

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

html如何用超鏈接打開新窗口時(shí)控制其屬性

css3中的漸進(jìn)增強(qiáng)和優(yōu)雅降級如何使用

css3的新單位vw、vh、vmin、vmax應(yīng)該如何使用

以上就是表格單元格td設(shè)置寬度無效應(yīng)該如何解決的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！