пересечение границы с пустым адом и границей в сафари и хроме

Question

В браузерах с хромовым и сафариром граница td перекрывает предыдущий элемент, когда есть пустой ад и сбой краха: сбой;

<div>Hello</div> 
 
<table style="border-collapse: collapse;"> 
 
<thead></thead> 
 
<tbody> 
 
    <tr> 
 
    <td style="border-top: 25px solid black">World</td> 
 
    </tr> 
 
</tbody> 
 
</table>

В хроме или сафари на текст «Hello», показанный в DIV перед столом, не читается из-за границы, перекрывающей от тд. Но это хорошо видно в firefox.

В Safari Chrome граница не перекрывает текст в следующих случаях:

• без пустого THEAD

• без границ коллапса

• с е в thead

<div>Hello</div> 
 
<table> 
 
<thead></thead> 
 
<tbody> 
 
    <tr> 
 
    <td style="border-top: 15px solid black">World</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 

 
<div>Hello</div> 
 
<table style="border-collapse: collapse;"> 
 
<tbody> 
 
    <tr> 
 
    <td style="border-top: 15px solid black">World</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 
<div>Hello</div> 
 
<table style="border-collapse: collapse;"> 
 
<thead> 
 
    <tr> 
 
    <th>Header</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td style="border-top: 15px solid black">World</td> 
 
    </tr> 
 
</tbody> 
 
</table>

Кажется неправильными в хроме или сафари или кто-нибудь знает, если есть причина для различного поведения?

Answer 1

Это похоже на недостаток в двигателе дисплея Chrome, да.
Существует, однако, простой способ: просто добавьте thead:empty {display:none} в таблицу стилей.

thead:empty {display:none}

<div>Hello</div> 
 
<table style="border-collapse: collapse;"> 
 
<thead></thead> 
 
<tbody> 
 
    <tr> 
 
    <td style="border-top: 15px solid black">World</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 
<div>Hello</div> 
 
<table> 
 
<thead></thead> 
 
<tbody> 
 
    <tr> 
 
    <td style="border-top: 15px solid black">World</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 

 
<div>Hello</div> 
 
<table style="border-collapse: collapse;"> 
 
<tbody> 
 
    <tr> 
 
    <td style="border-top: 15px solid black">World</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 
<div>Hello</div> 
 
<table style="border-collapse: collapse;"> 
 
<thead> 
 
    <tr> 
 
    <th>Header</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td style="border-top: 15px solid black">World</td> 
 
    </tr> 
 
</tbody> 
 
</table>