antd的table踩坑

596 阅读1分钟

table组件的第一行会有一行空行,导致首行内容被遮挡,如下:

image.png 打开控制台排查如下: image.png

问题原因

antd的Table组件首行插入了一行类名为“ant-table-measure-row”的空行,用来测量主体列宽度,为了解决遮挡问题的解决方案:

设置透明度为0(自己探索的方法)

image.png

visibility: collapse(github上的方法,问题链接点击这里

image.png

拓展

CSS 属性 visibility: collapse 主要用于表格行、表格列、表格行组、表格列组等表格相关元素。当应用于这些元素时,visibility: collapse 会隐藏元素,同时不会占用空间,就好像该元素从未存在过一样。这与 display: none 类似,但 visibility: collapse 在某些情况下可以提供更好的性能,特别是在处理大型表格时。

详细说明

  • visibility: collapse

    • 效果:隐藏元素,且不占用空间。
    • 适用元素:主要适用于表格行 (<tr>)、表格列 (<col>)、表格行组 (<tbody>)、表格列组 (<colgroup>) 等。
    • 特点:与 display: none 类似,但对表格的布局影响更小,性能更好。
  • visibility: hidden

    • 效果:隐藏元素,但仍然占用空间。
    • 适用元素:适用于所有元素。
    • 特点:元素不可见,但仍然在文档流中占据空间。
  • display: none

    • 效果:隐藏元素,且不占用空间。
    • 适用元素:适用于所有元素。
    • 特点:元素完全从文档流中移除,不占用任何空间。