HTML表格寬度差異

-1

this chart的最後一行使用摺疊的html表格創建的數據儘管寬度相同，但縮短了幾個像素。爲什麼？有沒有更好的方法來創建圖表而不使用多個表格？HTML表格寬度差異

<table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr> 
<td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">User</td> 
<td style="text-align:center;width:600px;height:25px;border-right:solid 1px;">300 Gb</td> 
<td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">Usage (Gb)</td> 
</tr> 
</table> 
<table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr> 
<td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">user1</td> 
<td style="background-color:#FF0000;width:436px;height:25px;"></td> 
<td style="background-color:#D22A00;width:54px;height:25px;"></td> 
<td style="background-color:#A85400;width:1px;height:25px;"></td> 
<td style="background-color:#7F7F00;width:12px;height:25px;"></td> 
<td style="width:97px;border-right:solid 1px;"></td> 
<td style="width:100px;text-align:center;">252.69</td> 
</tr> 
</table> 
<table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr> 
<td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">user2</td> 
<td style="background-color:#FF0000;width:344px;height:25px;"></td> 
<td style="width:256px;border-right:solid 1px;"></td> 
<td style="width:100px;text-align:center;">172.15</td> 
</tr> 
</table> 

<table cellpadding="0" style="padding-right:0px;padding-left:0px;text-align:center;width:800px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr> 
<td style="height:25px;width:114px;background-color:#FF0000">&gt;32 days</td> 
<td style="height:25px;width:114px;background-color:#D22A00">&lt;32 days</td> 
<td style="height:25px;width:114px;background-color:#A85400">&lt;16 days</td> 
<td style="height:25px;width:114px;background-color:#7F7F00">&lt;8 days</td> 
<td style="height:25px;width:114px;background-color:#54A800">&lt;4 days</td> 
<td style="height:25px;width:114px;background-color:#2AD200">&lt;2 days</td> 
<td style="height:25px;width:116px;background-color:#00FF00">&lt;1 days</td> 
</tr> 
</table>

來源

2014-02-06 Jean

你真的應該添加一些CSS樣式，以便每一樣東西都不會被標記爲'style =「height：25px; width：114px;」'等等等等（只是爲了便於閱讀） – royhowie

'inline styles'是一種痛苦在屁股裏修改和閱讀。僅供參考。 –

Luxelin它是自動生成的代碼，並不打算讀取或手動編輯。 – Jean

對於容器元素，其寬度/高度在默認情況下不包括填充，邊距和邊框（謝謝@davidpauljunior）。設置元素的box-sizing: border-box屬性，以確保它們完全按照指定的寬度/高度排列，同時考慮填充，邊距和邊框。

http://jsfiddle.net/hCj9J/1/

來源

2014-02-06 03:23:18

...並且不包括邊框，這是這裏的問題（與第一個表中的''元素的邊界有關） – davidpauljunior

看起來像你做你的數學錯誤的或者多餘的邊框與你的號碼擰緊。這裏確實沒有有效地使用表格或CSS類。使用表格而不是一堆div的意義在於，您不必指定每個單元格的大小。它繼承的display：table屬性爲你做了所有的花哨的東西。

在前2行中創建一個具有3個TD的單個新表，並在第3行中創建7個。第三排將有全部7個TD。對於第一排和第二排，你將擁有一個TD，然後你將擁有一個帶有colspan ='5'的TD，然後是另一個TD。

這裏的colspans的一個基本的例子：

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td colspan="2"></td> 
    </tr> 
</table>

然後，你可以把這些細胞或拖一類，你可以使用帶有CSS着色他們，而不是給每一個自己的風格屬性。

來源

2014-02-06 03:27:33 Dominick

HTML表格寬度差異

回答

相關問題