Question

我遇到了问题，我迫切需要帮助。

我出于某种原因需要分别渲染表头和表体。每个列和标题单元具有相同的css类（例如.col1_name）。那些css类已经声明了宽度和文本对齐，并且以这种方式我确保头部和表体单元格保持正确对齐。

而且，在IE8和Firefox中一切正常。我遇到了WebKit浏览器的问题（Chrome和Safari。Chrome对我来说非常重要。）它们将表体细胞的宽度比IE和FF低5px。我无法追踪问题，但我看到那些-5px宽度是计算样式。

以下是s-shot和一些示例代码。 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>

非常感谢大家的帮助！

Answer 1

虽然我怀疑你只是有另一个声明会覆盖你期望的声明，但请尝试添加最小宽度和最大宽度。

Answer 2

@NSD你让我走上正轨。我重新重新查看了我使用datagrids的整个代码，我发现body表的宽度设置为auto。

所以，谢谢你们的时间。

结论：如果您具有相同的单元格宽度，但表格宽度不同（即xyz px / auto），则在Chrome中您将获得不同的单元格宽度。

再次感谢您的时间。

Answer 3

您是否尝试设置margin和padding？

margin: 0;
padding: 4px;

Answer 4

在您的代码中，ID为“ table-body ”，但在Chrome屏幕截图中显示为“ table-bodypozicije ”。检查你的css是否有' table-bodypozicije '的定义 - 这可能会覆盖你的td's类的样式。

奇怪的Chrome问题

4 个答案: