javascript - 如何在 IE11 中使用 css 垂直拉伸(stretch) span 到其父元素

Question

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

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

如有任何提示如何将跨度拉伸(stretch)到父元素的 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