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

Question

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

我可以轻松地将跨度水平拉伸到 100%，但我没有那么幸运地垂直拉伸跨度。我已经花了几个小时尝试以下 css 属性及其各种值的不同组合..."display"、"overflow" 和 "position" 以及其他。到目前为止没有运气。

如果能提供任何有关如何将跨度拉伸到父元素的 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%;
}

这里有一个有趣的 post：

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

How to vertically stretch span to its parent element <td> with css in IE11

html

javascript

css

internet-explorer-11