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

Question

The design I'm working with requires a border around a table row. For other complicated reasons, I cannot use the border property directly to achieve this. I have tried 2 approached, both involving using the pseudo-element :after.

1. I used a tr:after . This works in all browsers except for IE8+. IE does not render the styles specified under tr:after at all.

2. I also tried td:after . This time the border shows up in IE8+, but IE doesn't render the border around the full height of the td, despite what the CSS says.

http://jsfiddle.net/kxmhW/2/ Please have a look and let me know if there is a way to fix this. The first table in the link uses tr:after. The second table uses td:after .

Thank you.

Answer 1

If you are just trying to get borders around the rows, would something like this work for your situation?

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/