如何在 IE11 中使用 css 将跨度垂直拉伸到其父元素 <td>

Question

我有一个包含 span 元素的表。我需要将这些 span 元素拉伸到 span 元素所在的表格单元格的整个宽度和高度。

我可以轻松地将跨度水平拉伸到 100%，但我没有那么幸运垂直拉伸跨度。我已经花了几个小时尝试以下 css 属性及其各种值的不同组合......“显示”、“溢出”和“位置”等。到目前为止还没有运气。

任何关于如何将跨度拉伸到父元素的 100% 高度的提示将不胜感激。

这是我的代码示例：

.testTable tbody>tr>td {
  vertical-align: top;
}

.customSpan {
  border: 1px solid green;
  margin: 0 auto;
  padding: 0px;
  display: table;
  background: orange;
  width: 100%;
  height: 100%;
}

<table border=1 width=500px class="testTable">
  <thead>
    <tr>
      <th>head123</th>
      <th>head123</th>
      <th>head123</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="customSpan">test 123</span></td>
      <td><span class="customSpan">test 123</span></td>
      <td><span class="customSpan">test 123 test 123</span></td>
    </tr>
    <tr>
      <td><span class="customSpan">test 123 test 123 test 123 test </span></td>
      <td><span class="customSpan">test 123 test 123 test 123 test January test 123 test 123 test 123 test 123 test 123 test</span></td>
      <td rowspan="2"><span class="customSpan">test 123/span></td>
			  </tr>
			  <tr>
				<td><span class="customSpan">test 123</span></td>
      <td><span class="customSpan">test 123 test 123 test 123</span></td>
    </tr>
  </tbody>
</table>

这是我想要完成的工作的直观表示。

谢谢！

Answer 1

你需要给 td 添加一个高度值，像这样：

.testTable td{
  height:100%;
}

这里有一个有趣的帖子：https://stackoverflow.com/a/19703263/7920525