相对定位的表格单元格的边框中的空白(带有镶边)

时间:2019-03-29 08:33:40

标签: google-chrome html-table rendering css-position css-tables

将chrome更新到最新版本(73.0.3683.86)后,我们发现表格边框中的空白出现问题。

我发现,它与 td 相对位置表格折叠边框 >和 rowspan 对于某些单元格不止一个。

在Chrome中:https://i.imgur.com/qL9jZ1G.png

在Firefox中:https://i.imgur.com/BJr5AHP.png

table {
  border-collapse: collapse;
}

table tr>td {
  border: 1px solid red;
  position: relative;
}
<table>
  <tr>
    <td rowspan="5">
      <p>some text</p>
    </td>
    <td rowspan="3">
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
  </tr>
  <tr>
    <td rowspan="2">
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
    <td>
      <p>some text</p>
    </td>
  </tr>
</table>

如何不删除相对位置折叠边框来解决此问题?

0 个答案:

没有答案