Menu
I am trying to archive the below,
All the heading should be aligned Center "The values of 1st Column=Align Left" and "All Values of 2nd, 3rd, and 4th Column=Align Center"
how to archive this, when i have auto-incrementing values in my table
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
body > table > tbody > tr > td{
text-align: center;
}
body > table > tbody > tr > th
{
text-align: center;
}
</style>
</head>
<body>
<table>
<col width="55%">
<col width="15%">
<col width="15%">
<col width="15%">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Money</th>
<th>Cars</th>
</tr>
<tr>
<td>John Franky</td>
<td>$100</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<td>Peter Thomson</td>
<td>$80</td>
<td>$100</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
438
You are looking for :first-child - http://w3schools.com/cssref/sel_firstchild.asp
body > table > tbody > tr > td{
text-align: center;
}
body > table > tbody > tr > td:first-child {
text-align: left;
}
try using :first-child pseudo element
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
body > table > tbody > tr > td{
text-align: center;
}
body > table > tbody > tr > td:first-child{
text-align: left;
}
body > table > tbody > tr > th
{
text-align: center;
}
</style>
</head>
<body>
<table>
<col width="55%">
<col width="15%">
<col width="15%">
<col width="15%">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Money</th>
<th>Cars</th>
</tr>
<tr>
<td>John Franky</td>
<td>$100</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<td>Peter Thomson</td>
<td>$80</td>
<td>$100</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
