Weird Chrome problem

Question

Hi.

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.

<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

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

Answer 2

Did you try to also set margin and padding?

margin: 0;
padding: 4px;

Answer 3

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 4

@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.