html 表格單元格的寬度和高度的設定
做網頁的時候,經常會碰到表格寬度對不齊的問題。詳細地看了html中表格標籤table的高度和寬度設定的細節,現總結如下:
1、table中的width和height設定及其作用:table中設定的height其實是設定個最小值,也就是當表格中的內容或者行高總值超過這個設定值時,會自動延長表格的height值,當表格中的內容或者行高沒有達到這個值時,會自動擴大到這個值。table中設定的width值一般為表格寬度的最大值,不能改變,即使內部的內容寬度超過也不能改變。(這個內部內容如果是圖片的話是可以改變表格寬度的。)
2、tr標籤中width和height設定及其作用:
3、td標籤中width和height設定及其作用:td標籤裡面的width和height都是起作用的。先看td的width吧,某一個td的width是和所處的一列每個td的width都相關的,取其中最大的width作為這一列中每個td的width,這點是讓我們最混淆的地方,一定要從全域性把握某個td的width,不能從這一個的width設定就斷言它的寬度就是多少,這樣是不準確的。當我們把每一列的寬度都弄清楚之後,事情就好辦了。這時候各個td之間的寬度分配按照第二條中各 tr的height分配規律,有一點不同的是全部是預設的情況下,各td的width不是平均分配,而是根據各自的實際內容按比例分配。再看看td的height設定吧,這個相對簡單一點了,不過各個td的height要看這個td所在的行的最大高度來確定這一行的每個td的height,然後各個行的高度情況和tr中的height分配原則是一樣的。還有一點要注意,就是td的height和tr的height之間的關係。首先肯定是根據內容的需 要,在這個基礎上,再根據設定的值來確定,哪個設定的值大就按照哪個,如果一個設定了值一個沒有設定值,那麼按照設定值的算。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
1,使用傳統的方法
<table
width= "400" >
<tr>
<td
width= "100" ></td>
<td
width= "100" ></td>
<td
width= "100" ></td>
<td
width= "100" ></td>
</tr>
<table>
2,使用css
<style>
.td{width:100px;}
</style>
<table
width= "400" >
<tr>
<td class = "td" ></td>
<td class = "td" ></td>
<td class = "td" ></td>
<td class = "td" ></td>
</tr>
<table>
以上兩種方法可能出現的問題就是,如果內容超過設定,如圖片寬度大於100,會自然撐開,自動調節表格寬度
3,用css
<style>
.td{width:100px;overflow:hidden}
</style>
<table
width= "400" >
<tr>
<td class = "td" ></td>
<td class = "td" ></td>
<td class = "td" ></td>
<td class = "td" ></td>
</tr>
<table>
用這種方法,可以把超過的部分隱藏掉,如果需要嚴格控制的話,可以採用這種方法,如果把overflow的屬性值設定成scroll或者 auto 的話,可以在超過的時候使用滾動條調節....
|