In IE 11 th Tag des nach Pseudoelement nicht richtig funktioniert

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>

Ich möchte für th Tag den rechten Rand haben, mit einigen sogar Lücken sowohl in oben und unten. Wie ich im Titel gesagt habe, verwende ich after Pseudo-Element für th Tag und es funktioniert nicht in IE 11. Bitte beachten Sie Code für Detail-Bug beigefügt.

Kann mir jemand irgendeine Lösung für dieses Problem vorschlagen?

Vielen Dank im Voraus!

---

aktualisieren

I @Mr Lister-Lösung umgesetzt und es hat gut funktioniert mit einreihigen th + td-Tag.

Ein weiterer Fehler ist, dass, wenn ich th mit rowspan verwendet, und das Verhalten in IE 11 ist wieder einmal gebrochen. Könnten Sie mir bitte helfen, dieses Problem gründlich zu lösen?

Vielen Dank im Voraus!

Answer 1

Sieht aus wie ein Fehler in Ordnung. Ich bin mir nicht sicher, ob es eine Lösung gibt, aber hier ist ein Workaround.

Zusätzlich zu der Linie innerhalb des th, zeichnen Sie eine weitere Linie innerhalb der td im Anschluss daran (in der gleichen Position auf dem Bildschirm natürlich).

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>

Die left: -3px im neuen Block wird die neue Linie in der gleichen Position wie die alten zu setzen bedeutet.
Beachten Sie, dass dies vom Wert der Eigenschaft der Tabelle border-spacing abhängt, die standardmäßig 2px ist, aber die ich vermutete, dass Sie 0 sein sollten. Wenn Sie das ändern, passen Sie diese entsprechend an.

Answer 2

Mit Hilfe von jQuery habe ich mit einem zusätzlichen Tag innerhalb th erreicht was ich will.

(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>