Question

我有一个表，其中第一列跨越多行。我试图用一些漂亮的填充物（不是完全粘在角落里）为它添加一个边框。因此我想在td中绘制一个绝对定位的div。不幸的是，在IE中，绝对定位的div是基于单行高度计算的，而不是实际td的高度。任何人都可以解决这个问题吗？ JSfiddle available =）

谢谢！

＆＃13;

td {
  position: relative;
  width: 50px;
}
.side {
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 5px;
  background-color: green;
  width: 5px;
}
.one {
  background-color: orange;
}
.two {
  background-color: blue;
}
.three {
  background-color: red;
}

＆＃13;

<table>
  <tr>
    <td class="one" rowspan="2">
      <div class="side"></div>
      1

    </td>
    <td class="two">2</td>
  </tr>
  <tr>
    <td class="three">3</td>
  </tr>
</table>

＆＃13;

Answer 1

根据css规范，未定义相对于td的位置。因此，不需要一致的结果。我可以建议一个替代解决方案，即将样式直接应用于td本身：

.one {
  background-color: orange;
  border-right: 5px solid green;
  outline: 5px solid orange;
}

https://jsfiddle.net/8g2dc2k3/2/

当然，这可能意味着调整其他td的样式来管理边框间距。

这有点不同寻常，我使用td的outline属性与背景颜色相同，以便使其工作。

具有绝对定位的Div不占TD的全高（IE问题）

1 个答案: