2

私が取り組んでいるデザインでは、表の行の周りに境界線が必要です。他の複雑な理由により、border プロパティを直接使用してこれを実現することはできません。私は2つのアプローチを試みましたが、どちらも疑似要素:afterを使用しています。

  1. を使用しましたtr:after。これは、IE8+ を除くすべてのブラウザーで機能します。IE は、指定されたスタイルをまったくレンダリングしませんtr:after。

  2. 私も試しtd:afterました。今回は境界線が IE8+ で表示されますが、IE は CSS の記述にもかかわらず、td の高さ全体に境界線をレンダリングしません。

http://jsfiddle.net/kxmhW/2/ご覧になり、これを修正する方法があれば教えてください。リンクの最初の表は tr:after を使用しています。2 番目の表は を使用していますtd:after。

ありがとうございました。

4

1 に答える 1

0

行の周りに境界線を付けようとしているだけの場合、このような状況でうまくいきますか?

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>

フィドル

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

于 2012-09-19T19:14:51.143 に答える