When using labels and spans with Bootstrap 4, the alignment may not appear centered when placed in a table within tr and td. How can I ensure that it is aligned properly?
span.bigcheck {
font-family: sans-serif;
font-weight: 500;
font-size: 2em;
}
span.bigcheck-target {
font-family: FontAwesome; /* Using an icon font for the checkbox */
}
input[type='checkbox'].bigcheck {
position: relative;
left: -999em; /* Hiding the real checkbox */
}
input[type='checkbox'].bigcheck + span.bigcheck-target:after {
content: "\f096"; /* Represents an open square (fa-square-o) in FontAwesome */
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
content: "\f046"; /* Represents a checked box (fa-check-square-o) in FontAwesome*/
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<table class='table table-sm tbl1 table-hover borderless font_fake' style='width:auto'>
<thead>
<tr>
<th>
<span class="bigcheck">
<label class="bigcheck">
<input type="checkbox" class="bigcheck" id="selectAll" />
<span class="bigcheck-target"></span>
</label>
</span>
</th>
<th>TH TITLE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="bigcheck">
<label class="bigcheck">
<input type="checkbox" class="bigcheck" name="cheese" value="yes" />
<span class="bigcheck-target"></span>
</label>
</span>
</td>
<td>td desc 1</td>
</tr>
<tr>
<td>
<span class="bigcheck">
<label class="bigcheck">
<input type="checkbox" class="bigcheck" name="cheese" value="yes" />
<span class="bigcheck-target"></span>
</label>
</span>
</td>
<td>td desc 2</td>
</tr>
<tr>
<td>
<span class="bigcheck">
<label class="bigcheck">
<input type="checkbox" class="bigcheck" name="cheese" value="yes" />
<span class="bigcheck-target"></span>
</label>
</span>
</td>
<td>td desc 3</td>
</tr>
</tbody>
</table>The code above shows that the checkbox does not align properly within the table cells (th, td).
I have tried using margin:0 and padding:0 but the issue persists.
Any suggestions on how to achieve proper alignment using Bootstrap 4 @label and Bootstrap 4 @span would be appreciated.
Thank you in advance.