Weird Chrome problem

Question

I've got a problem and I'm desperate for help.

I needed for some reason to render table header and table body separately. Each column and header cell have got same css class (eg. .col1_name). Those css classes have got declared width and text-align, and in that manner i'm making sure that header and table body cells stay aligned properly.

And, everything is OK in IE8 and Firefox. I've got problems with WebKit browsers (Chrome and Safari. Chrome is important for me.) They are rendering width of table body cells 5px less than IE and FF. I could not trace the problem, but I saw that those -5px widths are in Computed styles.

Below are s-shots and some sample code. IE 8 Is just fine http://img191.imageshack.us/img191/2360/probie8.png

Firefox is just fine http://img705.imageshack.us/img705/661/probff.png

Google Chrome is not so fine http://img199.imageshack.us/img199/5176/probgc.png

Inspecting element ... http://img96.imageshack.us/img96/19/probj.png

<style type="text/css">
    .rbr{ width: 45px; text-align: left;}
    .sifra {width: 90px; text-align: left;}
    .naziv { width: 240px; text-align: left;} 
    .kolicina {width: 90px; text-align: right;}
    .cena {width: 60px; text-align: right;} 
</style> 

<table id="tableheader">
 <thead>
  <tr>
      <th class="rbr">RB.</th>
      <th class="sifra">Sifra</th>
      <th class="naziv">Naziv</th>
      <th class="kolicina">Kolicina</th>
  </tr>
 </thead>
</table>
<table id="tablebody">
  <tbody>
   <tr> 
    <td class="rbr">1</td>
    <td class="sifra">11111112</td>
    <td class="naziv">Adelante 3 series</td>
    <td class="kolicina">2.00</td>
   </tr>
   <tr> 
    <td class="rbr">2</td>
    <td class="sifra">86868631</td>
    <td class="naziv">Canyon CNR</td>
    <td class="kolicina">1.00</td>
   </tr>
  </tbody>
</table>

Many thanks people for any help!

Answer 1

@NSD you got me on right track. I re-re-re-re-viewed my entire code that is working with datagrids, and I found that body table got width set to auto.

So, thank you guys for your time.

Conclusion: if you have same cells width, but different table width (ie. xyz px / auto ) , in Chrome you'll get different cell widths.

Again, thank you for your time.

Answer 2

In your code the id is 'table-body' but in the Chrome screenshot it says 'table-bodypozicije'. Check your css for a definition of 'table-bodypozicije' - this may be overiding your class styles applied to your td's.

Answer 3

Did you try to also set margin and padding?

margin: 0;
padding: 4px;

Answer 4

While I suspect you simply have another declaration overriding the one you expect, try adding a min-width and max-width.