React Table scaled Checkbox alignment

Viewed 284

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.

enter image description hereenter image description here

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.
0 Answers
Related