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

Question

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

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

rc-table版本：6.7.0

请问有遇到的吗？

Answer 1

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

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

我们只需要重置掉浏览器默认样式，设置border-spacing为0。

通常我们在项目中需要引入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。