I am trying to apply a class a TD within a table that I am iterating in PHP. The table generates just fine, and inline styling works, but I can't get the classes to apply from my style sheet.
My header with link to stylesheet
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="screen" href="bbapi.css" />
</head>
Here is my table generation which work fine:
<div>
<table class="output-table">
<tr>
<th scope="col">Store #</th>
<th scope="col">Type</th>
<th scope="col">City</th>
<th scope="col">State</th>
<th scope="col">Distance</th>
</tr>
<?php
//ITERATE LOOP TO OUTPUT XML STRING DATA INTO A TABLE
foreach($xmlcont as $url)
{
?>
<tr>
<td><?php echo "{$url->storeId}"?></td>
<td><?php echo "{$url->storeType}"?></td>
<td><?php echo "{$url->city}"?></td>
<td><?php echo "{$url->region}"?></td>
<td><?php echo "{$url->distance}"?></td>
</tr>
<?php
}
?>
</table>
</div>
Stylesheet classes (the color is just for testing atm):
table.output-table td {
background-color:aqua;
}
table.output-table th {
background-color:lime;
}
The goal is to be able to apply one class to the table header rows <th> and another to the <td> rows. For some reason either I am targeting the CSS incorrectly or something else entirely.
You have done all fine. Seems you have defined some styles for td and th in your CSS. I suggest you to try put !important to your styles.
table.output-table th {
background-color:lime!important;
}
But better way is to inspect where is exactly set styles, and remove them