I am working on enhancing my knowledge of CSS.
Below is the HTML code for a table I have:
<div class="app-pages validate-email-page" id="containerbg2">
<div>
<form action="<?php echo site_url("/validation-control");?>" method="post" id="dataForm">
<table border='1' class="email-table">
<tr>
<th>First Name</th>
<th>Surname</th>
<th>Email</th>
<th>Sign Up Date</th>
<th>Expiration Date</th>
<th>Roll back user?</th>
<th>Repeat Validation?</th>
</tr>
<?php
$wcl_ci_api->get_page_view_verification_emails();
?>
</table>
<input type="submit" value="Confirm">
</form>
</div>
</div>
</div>
Here is the CSS code related to the table:
div.validate-email-page table {
text-align: left;
}
From my interpretation of the CSS above:
It specifies that any 'table' inside a 'div' with the class 'validate-email-page' will have its text aligned to the left.
To apply specific styling to parts of the table, such as headers, you can use the following CSS rules:
div.validate-email-page table th{
text-align: left;
}
div.validate-email-page table tr{
text-align: center;
}
The above two rules indicate:
Centered (left-aligned) text for all rows (headers) in a table within a div with the class 'validate-email-page'
So far, everything seems to be functioning correctly.
However, my challenge lies in centering only the checkboxes (with class 'checkradio' and type 'checkbox') which are generated by PHP. Despite numerous attempts, I have not been successful in achieving this.
I have experimented with various alternatives without finding the correct solution, for example:
div.validate-email-page table input checkbox{
text-align: Center;
}
Although I sense I am close, I am still unable to resolve the issue or find a clear resolution.
I would ideally prefer to style based on column names so that I can alter the appearance of each column accordingly.