Question

在chrome和safari浏览器中，当存在空的thead和border-collapse时，td的边框与前一个元素重叠：collapse;

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

在chrome或safari中，由于来自td的重叠边界，在表格前面的div中显示的文本“Hello”不可读。但它在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>

在chrome或safari中似乎有问题，或者有人知道是否有不同行为的原因？

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>

在safari和chrome

1 个答案: