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

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;
}

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

---

渲染示例

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

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

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

所以，我要使用 WebKit 的 / Blink 的渲染，我需要它主要在 IE10 上工作，但希望在 IE11 上也能工作。解释 IE11 中发生了什么变化以使我的布局以与 IE10 中的破坏方式完全不同的方式中断的奖励积分。

---

IE11 问题的其他示例

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

如您所见，IE11 渲染中断比上例更明显，以至于表格单元格未垂直对齐。 （如果您查看顶部标记为 9:00 的垂直线。）我猜测这是因为 <div> 中的 height: 100% 表示“取父级的 height元素”，而不是“占用可用的垂直空间”，并将 <div> 中的内部 padding 添加到其中。 （这在标准盒子尺寸模型的背景下是一种变态的感觉，但我猜这艘船已经在这个话题上航行了。）

在内部<div> 上添加box-sizing: border-box; 几乎，但不完全可以解决问题，但结果看起来完全有问题，可能是渲染器错误：

无论如何，IE11 损坏不是我的主要问题，就像 IE10 的内容溢出/单元格没有增长一样。

Answer 1

如果您不介意不支持 display: inline-block 应用于 div。

Example here.