IE 11には、第タグの擬似要素の後に適切に

Question

table { 
 
    border-top: 1px solid #000; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
tr, th, td { 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
th { 
 
    padding: 30px; 
 
    position: relative; 
 
    text-align: left; 
 
    width: 30%; 
 
} 
 

 
th:after { 
 
    background: #000; 
 
    bottom: 30px; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 30px; 
 
    width: 1px; 
 
} 
 

 
td { 
 
    padding: 30px; 
 
    position: relative; 
 
} 
 

 
th + td:before { 
 
    background: #000; 
 
    bottom: 30px; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: -1px; 
 
    top: 30px; 
 
    width: 1px; 
 
}

<table> 
 
    <tr> 
 
    <th>Line</th> 
 
    <td>Line</td> 
 
    </tr> 
 
    <tr> 
 
    <th>Line<br>Line<br>Line</th> 
 
    <td>Line</td> 
 
    </tr> 
 
    <tr> 
 
    <th>Line</th> 
 
    <td>Line<br>Line<br>Line</td> 
 
    </tr> 
 
    <!-- new problem arise --> 
 
    <tr> 
 
    <th rowspan="2">Line</th> 
 
    <td>Line</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Line</td> 
 
    </tr> 
 
</table>

私は上部と下部の両方でいくつかさえもギャップで、thタグの右の境界線を持つようにしたい動作しません。私がタイトルで言ったように、thタグにはafter疑似要素を使用し、IE 11では動作しません。バグの詳細は添付のコードをご覧ください。

誰も私にこの問題の解決策を提案できますか？

ありがとうございます！

---

更新

Iは@Mrリスターのソリューションを実装し、それは、単一の行th + tdタグとよく働きました。

thをrowspanと使用したときに、IE 11の動作がもう一度壊れてしまうという別のバグが発生しました。この問題を完全に解決するために私を助けてください。

ありがとうございます！

Answer 1

バグのようです。解決策があるかどうかはわかりませんが、回避策があります。

thの内側の線に加えて、それに続くtdの中に別の線を描きます（画面上の同じ位置にあります）。

table { 
 
    border-top: 1px solid #000; 
 
    width: 100%; 
 
} 
 

 
tr, th, td { 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
th { 
 
    padding: 30px; 
 
    position: relative; 
 
    text-align: left; 
 
    width: 30%; 
 
} 
 

 
th:after { 
 
    background: #000; 
 
    bottom: 30px; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 30px; 
 
    width: 1px; 
 
} 
 

 
/* this is new */ 
 
th + td::before { 
 
    background: #000; 
 
    bottom: 30px; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: -3px; 
 
    top: 30px; 
 
    width: 1px; 
 
} 
 

 
td { 
 
    padding: 30px; 
 
    position: relative; /* and I added this line */ 
 
}

<table> 
 
    <tr> 
 
    <th>Line</th> 
 
    <td>Line</td> 
 
    </tr> 
 
    <tr> 
 
    <th>Line<br>Line<br>Line</th> 
 
    <td>Line</td> 
 
    </tr> 
 
    <tr> 
 
    <th>Line</th> 
 
    <td>Line<br>Line<br>Line</td> 
 
    </tr> 
 
</table>

新しいブロックでleft: -3pxは古いものと同じ位置に改行を入れるためのものです。
これはテーブルのborder-spacingプロパティの値に依存しますが、これはデフォルトで2pxですが、0であると思われます。これを変更する場合は、これに応じて調整してください。

Answer 2

jQueryの助けを借りて、私はthの余分なタグで完全に欲しいものを達成しました。

(function($) { 
 
    var $span = $("th").find("span"); 
 
    $span.each(function(index, span) { 
 
    var $th = $(span).closest("th"); 
 
    var height = $th.height(); 
 
    $(span).css({ 
 
     "height": height 
 
    }); 
 
    }); 
 
})(jQuery);

table { 
 
    border-top: 1px solid #000; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
tr, th, td { 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
th { 
 
    padding: 30px; 
 
    position: relative; 
 
    text-align: left; 
 
    width: 30%; 
 
} 
 

 
th > span { 
 
    align-items: center; 
 
    display: flex; 
 
    padding-left: 50px; 
 
} 
 

 
th > span:after { 
 
    background: #000; 
 
    bottom: 30px; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 30px; 
 
    width: 1px; 
 
} 
 

 
td { 
 
    padding: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th><span>Line</span></th> 
 
    <td>Line</td> 
 
    </tr> 
 
    <tr> 
 
    <th><span>Line<br>Line<br>Line</span></th> 
 
    <td>Line</td> 
 
    </tr> 
 
    <tr> 
 
    <th><span>Line</span></th> 
 
    <td>Line<br>Line<br>Line</td> 
 
    </tr> 
 
    <!-- new problem arise --> 
 
    <tr> 
 
    <th rowspan="2"><span>Line</span></th> 
 
    <td>Line</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Line</td> 
 
    </tr> 
 
</table>