table组件的第一行会有一行空行,导致首行内容被遮挡,如下:
打开控制台排查如下:
问题原因
antd的Table组件首行插入了一行类名为“ant-table-measure-row”的空行,用来测量主体列宽度,为了解决遮挡问题的解决方案:
设置透明度为0(自己探索的方法)
visibility: collapse(github上的方法,问题链接点击这里)
拓展
CSS 属性 visibility: collapse 主要用于表格行、表格列、表格行组、表格列组等表格相关元素。当应用于这些元素时,visibility: collapse 会隐藏元素,同时不会占用空间,就好像该元素从未存在过一样。这与 display: none 类似,但 visibility: collapse 在某些情况下可以提供更好的性能,特别是在处理大型表格时。
详细说明
-
visibility: collapse:- 效果:隐藏元素,且不占用空间。
- 适用元素:主要适用于表格行 (
<tr>)、表格列 (<col>)、表格行组 (<tbody>)、表格列组 (<colgroup>) 等。 - 特点:与
display: none类似,但对表格的布局影响更小,性能更好。
-
visibility: hidden:- 效果:隐藏元素,但仍然占用空间。
- 适用元素:适用于所有元素。
- 特点:元素不可见,但仍然在文档流中占据空间。
-
display: none:- 效果:隐藏元素,且不占用空间。
- 适用元素:适用于所有元素。
- 特点:元素完全从文档流中移除,不占用任何空间。