React Component rc-table 固定列头高度不一致,以及width属性只作用于固定列

复现demo:https://codesandbox.io/s/angr...

上面出现的问题:固定列头高度偏高;width属性只对固定列起作用。

rc-table版本:6.7.0

请问有遇到的吗?

阅读 780
评论
    1 个回答
    • 291

    看到这个问题我也觉得很灵异,甚至尝试了官方demo还是有问题,不过最终我发现是浏览器默认样式的问题:

    // 默认边框会有2px的大小,就导致我们拿到的表头高度是大的。
    table {
        border-collapse: separate;
        border-spacing: 2px;
    }

    我们只需要重置掉浏览器默认样式,设置border-spacing0

    通常我们在项目中需要引入normalize.css这样的重置样式,在rc-table中就使用了该css

     <link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>

    补充一下rc-table的固定列用法:

    demo点此

    若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。如果指定 width 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。

    建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。

      相似问题
      推荐文章