html - 一种跨浏览器的方式来增长一行中的所有表格单元格以匹配最大单元格的内容？

Question

我有一个用于显示时间表的 HTML 表格。我最终想要的布局特征是:

1. 如果可能，让每个表格单元格的大小相同以使表格看起来规则。 (手动选择以适合最常见的内容。)
2. 如果内容太长，请将单元格加高以容纳它。还要使同一行中的所有其他表格单元格更高以匹配高度。 (宽度和列分别相同，但这种情况很少发生。)
3. 内容周围有一个内边框。 (为简单起见。我的实际内容具有其他装饰样式，这些样式不应跨越应用到它的封闭单元格。)

我的问题是:是否有跨浏览器的方式——最好不涉及X-UA-Compatible – 获得具有上述属性的布局？

---

当前代码(Codepen) :

HTML

<table>
  <tr>
    <td>
      <div>
        Hello, world!
      </div>
    </td>
    <td>
      <div>
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    </td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;

  border: thin solid silver;
}

table td {
  height: 60px;
  width: 60px;
  box-sizing: border-box;

  padding: 1px;

  border: thin solid silver;
}

table td div {
  height: 100%;

  border: thin solid black;
  border-radius: 8px;
}

(box-sizing: border-box; 上的 <td> 真的比任何东西都更强制症，我只是希望表格单元格的内部有 60px 而不管填充。)

---

渲染示例

这是上面在三种不同浏览器中呈现的方式:

• 在 Chrome(和 Safari)中，一切都按预期呈现。内部 <div> 周围有一个 1px 的填充, 和所有其他 <div>行中的 s 增长以填充可用高度。到目前为止一切顺利。
• 在 Internet Explorer 11 中，内部 <div>粘在表格单元格上。 IE。没有填充，除了单元格的右侧，甚至在行中的最后一个单元格上也没有。 (嗯？)但是，高度确实会正确扩展。
• 在 Internet Explorer 10 中，填充被正确应用。不幸的是，第三个单元格的长内容溢出了单元格边界，因为高度是直接指定的。毫不奇怪，这就是我实际的 bugrep 中的内容。 (我正在使用 IE 的 F12 开发人员工具中的仿真模式来检查这一点，但渲染与我在 bugrep 中获得的屏幕截图相匹配。)

我尝试使用 min-height而不是 height在 <td> 上在 IE10 示例中。这解决了溢出，但内部 <div>不会扩展:

所以，我打算使用 WebKit/Blink 的渲染，我需要它主要在 IE10 上工作，但希望也能在 IE11 上工作。加分解释了 IE11 中的更改，使我的布局中断的方式与 IE10 中的中断方式完全不同。

---

IE11 问题的其他示例

为了完整起见，我在 Chrome 和 IE11 中包含了我的实际应用程序的屏幕截图:

如您所见，IE11 渲染破损比上面的示例更明显，表格单元格未垂直对齐。 (如果您查看顶部标记为 9:00 的垂直线。)我猜测这是因为 height: 100%在<div>意思是“取父元素的height”，不是“取可用垂直空间”，里面的padding在<div>被添加到那个。 (这在标准盒子尺寸模型的背景下有一种变态的意义，但我想这艘船已经在这个话题上航行了。)

添加 box-sizing: border-box;在内<div> 几乎，但不完全修复了问题，但结果看起来完全是故障，可能是渲染器错误:

无论如何，IE11 的崩溃不是我在这里的主要问题，就像 IE10 的内容溢出/单元格不增长一样。

Answer 1

如果您不介意不支持 < IE7，一个简单的解决方法是将 display: inline-block 应用于 div。

Example here.