I'm having some struggles with the placement of a rescaled checkbox in a React table. The original is on the left, the rescaled on the right.
I'm using the Table from react-bootstrap. Looks something like this:
import Table from 'react-bootstrap/Table';
import Form from 'react-bootstrap/Form';
table() {
return(
<Table striped hover size='sm'>
<thead>
<tr>
<th>
<Form.Check className='mycheck' type='checkbox'/>
</th>
...
</tr>
</thead>
</Table>
)
}
With css:
.mycheck {
-ms-transform: scale(1.75);
-moz-transform: scale(1.75);
-webkit-transform: scale(1.75);
-o-transform: scale(1.75);
}
Tried solutions
- I tried adding padding, but this is not an ideal solution as for different table sizes and different content length, I need different padding.
- I also tried translating the checkboxes, but again the shift needed is different for different table sizes and content length.

