在進行網頁制作時,我們經常需要使用表格來排版。而表格中每一個單元格的寬度往往需要我們進行設置。但是,我們發現當要設置td標簽的寬度時,加上width屬性,卻發現并沒有達到預期效果。
<table> <tr> <td width="200">第一列</td> <td>第二列</td> </tr> </table>
當我們查看表格效果時,就會發現第一列與第二列的寬度并不相等。為什么會出現這種情況呢?原來,在CSS中,設置td的width屬性是沒用的!因為在默認情況下,td單元格寬度是根據其內部內容來進行調整的。
要解決這個問題,我們需要使用CSS中的樣式來控制表格寬度。
<style> table{ width: 100%; border-collapse: collapse; } td{ width: 50%; text-align: center; border: 1px solid black; } </style> <table> <tr> <td>第一列</td> <td>第二列</td> </tr> </table>
可以看出,在樣式中設置了table寬度為100%并取消邊框重疊,同時設置了td的寬度為50%并居中對齊,這樣就可以達到我們想要的效果。
總之,CSS中td的width屬性是沒有作用的,需要使用CSS樣式來控制表格寬度。
上一篇css td會被內容撐高
下一篇9中不同CSS圓形進度條