Question

就像标题所说，我希望有一个HTML表格，允许其列和行的大小独立于单元格内容。如果行不够高或列不够宽以显示所有单元格的内容，那么该内容应该简单地消失在单元格后面。

我想出了以下解决方案，在chrome（17）和opera（11.61），safari（5），IE（9）中运行良好，但在firefox中没有：

th, td {
    position: relative;
    overflow: hidden;
}

td > span {
    position: absolute;
    top: 0px;
}

th > div {
    position: relative;
}

（设计是这样的，每个td只包含一个span和任何“真实”内容，就像文本在td内的span内。同样，每行都有一个初始th，并且有一个只包含th的标题行，所有这些都包含一个div。通过设置DIV内部的显式高度和宽度，我可以设置行的宽度和高度。）

以下HTML说明了示例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>test</title>
    <style type="text/css">
      table {
        border-width: 1px;
        border-style: none none solid solid;
      }

      th, td {
        border-width: 1px;
        border-style: solid solid none none;
      }

      th > div {
        height: 18px;
        width: 50px;
      }

      th, td {
        overflow: hidden;
        position: relative;
      }

      td > span {
        position: absolute;
        top:0px;
      }

      th > div {
        position: relative;
      }
    </style>
  </head>
  <body>
    <table
      cellspacing="0"
      cellpadding="0"
      style="font-size: 10pt"
    >
      <thead>
        <tr>
          <th><div>Header0</div></th>
          <th><div>Header1</div></th>
          <th><div style="width:25px">Header2</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th><div>Header1</div></th>
          <td
            style="
              vertical-align: bottom
            "
          >
            <span style="
              font-size:6pt;
              background-color: red;
            ">A</span>
          </td>
          <td>
            <span style="
              font-size:6pt;
              background-color: blue;
            ">B</span>
          </td>
        </tr>
        <tr>
          <th><div>Header2</div></th>
          <td>
            <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">C</span>
          </td>
          <td>
            <span style="
              font-size:30pt;
              background-color: green;
            ">D</span>
          </td>
        </tr>
        <tr>
          <th><div style="height:10px">Header2</div></th>
          <td>
            <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">E</span>
          </td>
          <td>
            <span style="
              font-size:6pt;
              background-color: blue;
            ">F</span>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

这在chrome和opera中工作得很好，它们都相对于td定位了span（这就是我给它们定位的原因：relative）。但是，在firefox中，位置：td的相对值被完全忽略，并且跨度相对于具有绝对或相对位置的表行上方的第一个祖先定位。因此，只有上面的规则，跨度的顶部粘在文档正文的顶部，如果我添加：

table {
    position:relative
}

跨度的顶部粘在桌子的顶部。但是一个位置：相对应用于tr或td似乎完全被忽略了。

非常感谢对工作解决方案的任何见解。

更新 Firefox根本不支持位置：相对于表格单元格。见https://bugzilla.mozilla.org/show_bug.cgi?id=35168#c11。 IMO，这是一个错误。尽管有人认为“标准”表示此设置的行为未定义，但其他浏览器似乎没有以合理有效的方式实现此问题，因此从我的观点来看似乎没有任何好的理由为什么firefox需要忽略这种事实上的行为。

经过一些实验，我提出了两种替代解决方案 - 它们都不完美 - 对于面临同样问题的其他人来说可能有用也可能没用。

1）对表格单元格使用position：static几乎解决了firefox中的问题（不改变所有其他提到的浏览器中的行为）。但是，如果你给表格单元格定位：静态，当你在表格单元格上设置text-align：right时会出现一个新问题。虽然这在所有其他提到的浏览器中都可以正常工作（它们在单元格内向右渲染范围），但firefox再次显示不同的行为，并显示单元格右侧外部的跨度。 / p>

2）使用table-layout：固定在表格上，并将单元格内容直接放在单元格中（不在单独的span或div中）。然后，您可以在第th个元素的样式中显式设置宽度和高度（请注意，在第th个元素内设置div的宽度/高度是不够的 - 您确实需要直接在该元素上执行此操作。这似乎google docs电子表格采用的方法。这种方法允许单元格内容比单元格宽。但是，你不能使表格行高于单元格内容的高度。

Answer 1

Firefox不支持位置：相对于表格元素。请参阅此答案：Does Firefox support position: relative on table elements?

解决方法是使用相对定位的div填充所有表格单元格。正如您所说，问题在于您必须单独调整所有这些div的大小。你可以使用一些棘手的CSS来简化这个：

  .atable th:nth-child(3) > div,
  .atable td:nth-child(3) > div {
    width:25px;
  }

  .atable tr:nth-child(3) div {
    height:10px
  }

http://jsfiddle.net/chad/9XwyX/2/

或者，您可以向div添加类来表示每行和每列：

http://jsfiddle.net/chad/9XwyX/3/

两者都不是特别干净，但它们可以在Firefox中使用。

Answer 2

您可以考虑从div和图像构建自定义表，以便它可以完全堆叠等。

包含行和列的HTML表，可以独立于单元格内容进行调整

2 个答案: