jeudi 12 juillet 2018

How to move checkboxes to the center in a table cell

I'm working on this simple table for bootstrap and I don't have really any experience with bootstrap and/or css. I need these checkboxes to be in the center of their column, but the problem is they stay on the far left. I put css (with <style> ) to create a custom class and set float: none, just to see if that would help, but it didn't. And since it's checkboxes, text-align doesn't help much.

Here's an image: tableImage

And here's the HTML:

<tr id="emailDiv" style="display: none">
    <td style="white-space: nowrap; width: 30%"><span id="emaillabel">Email Label</td>
    <td style="width: 5%">
        <input type="button" value="Edit" id="emailAlert" class="btn btn-default btn-block-mobile btn-xs" />
    </td>
    <td class="text-center" style="width: 8%">
        <input type="checkbox" class="sub-col-1 dont-get-data" data-billaccount="emailField" data-subtype="15" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-2 dont-get-data" data-billaccount="emailField" data-subtype="16" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-3 dont-get-data" data-billaccount="emailField" data-subtype="17" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-4 dont-get-data" data-billaccount="emailField" data-subtype="18" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-5 dont-get-data" data-billaccount="emailField" data-subtype="19" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-6 dont-get-data" data-billaccount="emailField" data-subtype="20" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-7 dont-get-data" data-billaccount="emailField" data-subtype="21" />
    </td>
</tr>




Aucun commentaire:

Enregistrer un commentaire