Question

我有一张桌子，我需要每个格子都有相同的固定高度和宽度。

所以我有：

th, td {
    min-width: 110px;
    width: 110px;
    max-width: 110px;
    min-height: 60px;
    height: 60px;
    max-height: 60px;
}

一个td就是：

<td><span>*number*</span></td>

我在Firefox 7上测试我的代码，我看到它们没问题，但在Chrome / IE9中，单元格更高。

所以：

有或没有最小 - 最大高度，高度为：

FF7：56px / 60px（无边框/带边框） Chrome：62px / 66px IE9：61px / 65px

问题是我在Photoshop上为TD制作了一个背景，如果尺寸不合适而我看起来很奇怪，我不知道如何解决它。

在这个问题之外，chrome表现得很奇怪。一旦页面加载，我通过Javascript应用了一些td's，它们不能用于chrome ...直到你有时刷新。

编辑：表格也有固定的高度和一些边框间距。

编辑2 ：我做了一个jsFiddle：http://jsfiddle.net/cFTpp/1/差异较小（58vs60），但仍然不同。

Answer 1

使用固定的表格布局：

table { table-layout: fixed; }

Answer 2

请检查以下代码。

<table border="0" align="center" cellpadding="0" cellspacing="0" style="width:800px;">
    <colgroup>
        <col  style="width:200px; background:#CCC"/>
        <col  style="width:100px; background: #666"/>
        <col  style="width:500px; background: #000"/>
    </colgroup>
    <thead>
      <tr>
        <th style="height:100px">head</th>
        <th style="height:100px">&nbsp;</th>
        <th style="height:100px">&nbsp;</th>
      </tr>
    </thead> 
    <tfoot> 
      <tr>
        <td>foot</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot> 
    <tbody>
      <tr>
        <td>body</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>

您可以通过更改<col style="width:200px;的宽度来调整任意列的宽度。我只是写内联样式。

Answer 3

我结束了为div更改表格，更容易实现一些结果。

具有特定高度的表td在不同浏览器上的工作方式不同

3 个答案: