<td>
<div id="test">...</div>
</td>
<td>
.....
</td>
I can see from firebug that td is about 40px wider than the "test" div(width+border+margin all included),but there is no css style that do this(no setting of width,padding)!
Why is the "td" not as wide as div here?
I'm now hardcoding the td to9 be as wide as "test" div,but feel uncomfortable.
Without the rest of your code, I'm going out on a limb here, but the <td> will auto size based on the table width / number of columns in the table. If your table does not have an explicit width assigned, then it will expand to 100% width of its container or parent element. You can feel comfortable avoiding this by setting explicit width on the table, or table cells as needed.
In the following scenario, each column will autosize to tablewidth / number of columns or in this case 400 / 4 = 100. So each column will be 100px wide.
<table style="width:400px">
<td></td>
<td></td>
<td></td>
<td></td>
</table>
Depending on the browser, there are two possible results in this scenario. 1. The table will expand to be 100% the width of its parent, or 600px here. That means that each column will then auto size to 150px wide. 2. The table and columns may expand to the width of the widest child element in its column group.
<body style="width: 600px"> <!-- Could be a div or other element here -->
<table>
<td></td>
<td></td>
<td></td>
<td></td>
</table>
</body>
The WC3 Spec can be found here and provides some great detail on how browsers are supposed to implement the HTML 4.01 spec in regards to tables.