I have a checkbox in the table and I cannot align them to the left.
<tr> <td colspan="3" class="cb"> <input type="checkbox" name="cb" value="checked" /> this is a checkbox </td> </tr> table.all td.cb{ color: #424242; border:1px solid black; margin:0 auto; text-align:left; }
I tried a lot of things, but the result is this:
I applied the border for demonstration purposes.
If I add float: left, I get the following:
I used the same code on another webpage where it worked fine (there were only 2 columns in the table).
Decision
I already had this in my .css file, which strangely caused the problem despite colspan = "3"
table.all td input{ width:90%; float:left; }
I changed it to
table.all td input.i{ width:90%; float:left; }
and added class = "i" to all other input types, and now it works fine.
If necessary, the whole form:
<div id="container_center"> <form> <table class="minden"> <tr> <td colspan="3"> <p class="title">Create new account</p> </td> </tr> <tr> <td colspan="3"> <p class="title2">Enter account holder information</p> </td> </tr> <tr> <td colspan="3"> <div id="container_jobb_content_vonal"> </div> </td> </tr> <tr> <td> <p>First name: *</p> </td> <td colspan="2"> <p>Last name: *</p> </td> </tr> <tr> <td> <input type="text" name="firstname" size="45"> </td> <td colspan="2"> <input type="text" name="lastname" size="45"> </td> </tr> <tr> <td> <p>Email: *</p> </td> <td colspan="2"> <p>Email again: *</p> </td> </tr> <tr> <td> <input type="text" name="email" size="45"> </td> <td colspan="2"> <input type="text" name="email2" size="45"> </td> </tr> <tr> <td> <p>Address 1: *</p> </td> <td colspan="2"> <p>Address 2:</p> </td> </tr> <tr> <td> <input type="text" name="address1" size="45"> </td> <td colspan="2"> <input type="text" name="address2" size="45"> </td> </tr> <tr> <td> <p>Country: *</p> </td> </tr> <tr> <td> <select name="country" class="sel_country"> <option value="">[Please Select]</option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Germany">Germany</option> </select> </td> </tr> <tr> <td> <p>City: *</p> </td> <td> <p>State/Province: *</p> </td> <td> <p>Zip code: *</p> </td> </tr> <tr> <td> <input type="text" name="city" size="45"> </td> <td> <input type="text" name="state" size="30"> </td> <td> <input type="text" name="zip" size="10" class="zip"> </td> </tr> <tr> <td> <p>Phone number: *</p> </td> </tr> <tr> <td> <input type="text" name="phone" size="45"> </td> </tr> <tr> <td colspan="3"> <p class="title3">Create your login</p> </td> </tr> <tr> <td colspan="3"> <div id="container_jobb_content_vonal"> </div> </td> </tr> <tr> <td> <p>Username: *</p> </td> </tr> <tr> <td> <input type="text" name="username" size="45"> </td> </tr> <tr> <td> <p>Password: *</p> </td> <td> <p>Confirm password: *</p> </td> </tr> <tr> <td> <input type="text" name="password" size="45"> </td> <td colspan="2"> <input type="text" name="password2" size="45"> </td> </tr> <tr> <td colspan="3"> <p class="title3">Accept terms</p> </td> </tr> <tr> <td colspan="3"> <div id="container_jobb_content_vonal"> </div> </td> </tr> <tr> <td colspan="3" class="cb"> <input type="checkbox" name="cb" value="checked"/>this is a checkbox </td> </tr> <tr> <td> <ul> <li><a href="termsofservice.html">Terms of service</a></li> <li><a href="privacypolicy.html">Privacy policy</a></li> </ul> </td> </tr> <tr> <td class="submit" colspan="3"> <input type="submit" name="purchase" value="Purchase" id="submitbutton"> </td> </tr> </table> </form> </div>
source share