如何在IE11中使用css将span扩展到其父元素

Question

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

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

如何将跨度延伸到父元素的100％高度的任何提示将非常感激。

这是我的代码示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我想要完成的视觉表现。

谢谢！

Answer 1

您需要在td中添加一个高度值，如下所示：

.testTable td{
  height:100%;
}

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