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에서는 작동하지 않습니다. 자세한 내용은 첨부 된 코드를 참조하십시오.

누구든지 내게이 문제에 대한 해결책을 제안 할 수 있습니까?

미리 감사드립니다.

---

업데이트 나는 @Mr 리스터의 솔루션을 구현하고, 단일 행 th + td 태그로도 일했다.

또 다른 버그는 th을 rowspan과 함께 사용했을 때 IE 11의 동작이 다시 손상된다는 것입니다. 이 문제를 철저하게 해결할 수 있도록 도와 주시겠습니까?

미리 감사드립니다.

Answer 1

버그는 괜찮습니다. 솔루션이 있는지 확실하지 않지만 해결 방법이 있습니다.

th 안에있는 선 이외에 td 안에 또 다른 선을 그립니다 (물론 화면의 동일한 위치에 있음).

새 블록의 left: -3px

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>

는 이전과 동일한 위치에서 새로운 라인을 넣어 의미한다.
이 값은 표의 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>