Question

我正在使用的设计需要在表格行周围设置边框。由于其他复杂的原因，我不能直接使用border属性来实现这一点。我试过2次接近，都涉及使用伪元素：after。

我使用了tr:after。这适用于除IE8 +之外的所有浏览器。 IE根本不会呈现tr:after下指定的样式。
我也试过td:after。这次边界显示在IE8 +中，但是IE不会在td的整个高度周围渲染边框，尽管CSS说的是。

http://jsfiddle.net/kxmhW/2/如果有办法解决这个问题，请查看并告诉我们。链接中的第一个表使用tr：after。第二个表使用td:after。

谢谢。

Answer 1

如果您只想尝试在行周围设置边框，那么这样的情况会适合您的情况吗？

<强> CSS

table {
border-collapse: collapse;
}

td {
background: #ddd;
width: 100px;
}

.tr-border  tr {
border: 2px solid red;
}

<强> HTML

<table class="tr-border">
      <tr>
        <td>1</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
  </table>

  <br />

  <table class="tr-border">
      <tr>
        <td>1</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
  </table>

<强> FIDDLE

http://jsfiddle.net/krishollenbeck/kxmhW/30/

在IE9中，伪元素：在TD之后没有得到正确的TD高度，是否有解决方法？

1 个答案: