checkbox checked icon is not in the center of the input in selection table

[hhshii]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

set Table with bordered: true

What is expected?

the icon should be in the center of the input

What is actually happening?

the icon is in the left of the input

Environment	Info
antd	3.18.2
React	16.8.6
System	MacOS 10.14.3
Browser	Chrome 76.0.3795.3 & 76.0.3800.0

[MrHeer]

Can we do this:
mixin.less#L64

  top: 50%;
- left: 21%;
+ left: 50%;
  display: table;

mixin.less#L99

  border-left: 0;
- transform: rotate(45deg) scale(1) translate(-50%, -50%);
+ transform: rotate(45deg) scale(1) translate(-100%, -20%);
  opacity: 1;

Preview

[hhshii]

@MrHeer Great! My temporary solution is changing 21% to 22% but it 's too ugly 😂

[MrHeer]

I have tried your solution, I can't see the difference between them. 😂

[zombieJ]

Seems a Chrome bug with collapsed bordered table. It get check box position as decimal:

$0.getBoundingClientRect()
DOMRect {x: 46.5, y: 164, width: 16, height: 21, top: 164, …}

Change percentage may be not best solution since we've adjust the percentage multiple time ...

[chiaweilee]

Can we do this:
mixin.less#L64

  top: 50%;
- left: 21%;
+ left: 50%;
  display: table;

mixin.less#L99

  border-left: 0;
- transform: rotate(45deg) scale(1) translate(-50%, -50%);
+ transform: rotate(45deg) scale(1) translate(-100%, -20%);
  opacity: 1;

Preview

This works for me.

[afc163]

https://codesandbox.io/s/magical-williams-36q12 from #19450