Strange table behavior

HTML & CSS
1

Hi,

i have the following code:


<table width="100%" align="center">
  <tbody>
    <tr>
      <td valign="top">
        <div class="product_name"></div>
        <div class="product_image"></div>
        <div class="product_price"></div>
        <div class="product_add2cart"></div>
      </td>
      <td valign="top">
        <div class="product_name"></div>
        <div class="product_image"></div>
        <div class="product_price"></div>
        <div class="product_add2cart"></div>
      </td>
    </tr>
  </tbody>
</table>

under FF firebuf i get the following CSS results:
table:
width=598px;

tbody, tr:
width=594px;

td:
width=147px;

  1. how is it possible that tbody and table have not the same width ?
    i have no border define ( border : 0px :wink:

  2. how is it possible that sum of 4 <td> width is not equal to <tr> width ?
    4x147 = 588 px; and not 594px;

td width is set into a CSS file to 145px :frowning:
in each <td> there are 4 div all with width=145px; :frowning:

i’m confused now where is the mistake.

thx.

2

ok i discovered that i missed float: left; for each <td>
now it works correctly.

3

Or probably you’ve missed cellspacing and border collapse?