Aligning checkboxes with out updating the global CSS

I was unable to align the thead(head level) check box ‘managersSelected’ to left (OR) align the row level check boxes to center with out changing the global CSS in the head section. I want to add inline style element to align the checkboxes.

Any thoughts?

Here is the code for html pag


<html>
<head>
   <style> 
    <!--
    table.mgr-table {
        text-align: left;
        padding: 10px;
        border: 1px solid #8C6B3E;
        width: 100&#37;
    }

    table.mgr-table th, table.mgr-table td {
        padding: 5px;
    }

    table.mgr-table thead tr {
        background-color: #EFEFE7;
        color: #7A481B;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 3px;
        padding-right: 3px;
        border-bottom: #8C6B3E 1px solid;
        border-left: #CECCB6 1px solid;
        border-right: #FFFFFF 2px solid;
        text-align: center;
    }

    table.mgr-table th.sorted {
        padding-right:20px;
    }

    table.mgr-table th.sortable a {
      white-space: normal;
    }

    table.mgr-table th.order1 {
        background-image: url(../images/ascending.gif);
        background-repeat: no-repeat;
        background-position: right;
    }

    table.mgr-table th.order2 {
        background-image: url(../images/descending.gif);
        background-repeat: no-repeat;
        background-position: right;
    }

    table.mgr-table tr.odd {
        background: url("../images/table_blue_row_bg.gif") repeat-x top #d3e1f0;
    }

    table.mgr-table tr.tableRowEven,table.mgr-table tr.even {
        background: #FFFFFF;
    }

    table.mgr-table tr.odd td {
        padding: 5px;
        border-left: #D3E1F0 1px solid;
        border-right: #D3E1F0 0px solid;
        vertical-align: top;
    }

    table.mgr-table tr.even td {
        background: #FFFFFF;
        border-left: #FFFFFF 1px solid;
        border-right: #FFFFFF 0px solid;
        padding: 5px;
        vertical-align: top;
    }
    -->
   </style>

</head>
<body>
    <div id="table_wrapper">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <h3>Add Managers</h3>
            <tr>
                <td>
                <table class="mgr-table" id="managerTable">
                    <thead>
                        <tr>
                            <th><input type='checkbox' name='managersSelected'  id='managersSelected' onClick='toggleCheckboxes();'/></th>
                            <th>Name</th>
                            <th>Phone</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd">
                            <td><input name="selectedName" type="checkbox" value="1234"/></td>
                            <td>MICHAEL MOORE</td>
                            <td>(573) 747-9447</td>
                        </tr>
                        <tr class="even">
                            <td><input name="selectedName1" type="checkbox" value="7658"/></td>
                            <td>RICK BALBOA</td>
                            <td>(572) 742-9447</td>
                        </tr>
                    </tbody>
                </table>
                </td>
             </tr >
        </table>
    </div>
</body>
</html>

I wonder why there is a CODE tag on SitePoint.

Hi,

I’m not sure why you have to have the styles inline but I’ll assume you have good reason :slight_smile:

You can force the issue like this:


<table border="0" cellpadding="0" cellspacing="0" width="100&#37;">
        <tr>
            <td><table class="mgr-table" id="managerTable">
                    <thead>
                        <tr>
                            <th [B]style="text-align:left!important">[/B]<input type='checkbox' name='managersSelected'  id='managersSelected' onClick='toggleCheckboxes();'/></th>
                            <th>Name</th>
                            <th>Phone</th>
                        </tr>

I’ll aslo assume you don’t have a doctype for a good reason :slight_smile: