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

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