Change background of <td> without adding class to <td> - php

Question

Background
I am trying to show a list of scheduled events for a user, to do this I am showing a bootstrap table with two columns, one is a generated list of 15m time intervals and the other is the event itself.
Scheduled events have a green background.
Problem
Due to the way I have setup my table and foreach loop I can't add a class to the <td> tag to change the background color depending on if there is an event or not.
What I have tried so far
Here is my view to display the data, I have added a div with a class 'event' which has a green background to denote that the event is scheduled.
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Time</th>
<th>Event</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- shows times as 1472792400 => 6:00, 6:15, 6:30 -->
<?php foreach ($intervals as $seconds => $interval) : ?>
<tr>
<td class="col-md-1">
<div class="text-center">
<i class="fa fa-clock-o"></i>
<?php echo $interval; ?>
</div>
</td>
<td class="col-md-10">
<?php foreach ($events as $key => $event) : ?>
<?php if ($event->seconds_start == $seconds) : ?>
<div class="event-header">
<span class="label label-default"><?php echo $event->event; ?></span>
</div>
<?php elseif ($event->seconds_start < $seconds && $event->seconds_end >= $seconds + 900) : ?>
<div class="event"> </div>
<?php else : ?>
<!-- nothing -->
<?php endif; ?>
<?php endforeach; ?>
</td>
<td class="col-md-1"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Here is my events table
and my css file
.event-header {
color:#fff;
font-weight:600;
background: #75a575;
border-bottom:1px solid #75a575 !important;
margin: -8px -10px -10px;
}
.event {
background: #abdbab;
margin: -8px -10px -10px;
}
here is how the events page looks so far
question
So basically if the event time equals the displayed time then I want to change the entire background color of the <td> to show that there is an event scheduled... but I can't add a class to the <td> because my logic block is within the <td></td> already. How do I do this?
UPDATE 1
Adding the <td> tags within the if statement (the ideal solution) like this...
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Time</th>
<th>Event</th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($intervals as $seconds => $interval) : ?>
<tr>
<td class="col-md-1">
<div class="text-center">
<i class="fa fa-clock-o"></i>
<?php echo $interval; ?>
</div>
</td>
<?php foreach ($events as $key => $event) : ?>
<?php if ($event->seconds_start == $seconds) : ?>
<td class="col-md-10 event-header">
<span class="label label-default"><?php echo $event->event; ?></span>
</td>
<?php elseif ($event->seconds_start < $seconds && $event->seconds_end >= $seconds + 900) : ?>
<td class="col-md-10 event"><td>
<?php else : ?>
<td class="col-md-10"><td>
<?php endif; ?>
<?php endforeach; ?>
<td class="col-md-1"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Produces the following view:
UPDATE 2
Getting closer, by showing nothing in the else statement, however the layout is still very broken and I am having a hard time processing where I am going wrong...
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Time</th>
<th>Event</th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($intervals as $seconds => $interval) : ?>
<tr>
<td class="col-md-1">
<div class="text-center">
<i class="fa fa-clock-o"></i>
<?php echo $interval; ?>
</div>
</td>
<?php foreach ($events as $key => $event) : ?>
<?php if ($event->seconds_start == $seconds) : ?>
<td class="col-md-10 event-header">
<span class="label label-default"><?php echo $event->event; ?></span>
</td>
<?php elseif ($event->seconds_start < $seconds && $event->seconds_end >= $seconds + 900) : ?>
<td class="col-md-10 event">hello<td>
<?php else : ?>
<!-- nothing -->
<?php endif; ?>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
now shows...
as you can see, whene there is not event matching the time then no column is shown, however if I add the column in the else statement and even add a break the layout goes haywire...

Answer 1

The specification exists but it looks browsers doesn’t support it yet.
https://www.w3.org/TR/selectors4/#subject
The proposed code would be something like this:
!td .event-header { /* styles */ }
The only solution I see is to fall back to JavaScript. It could be worse than to refactor PHP thought.

Answer 2

If you want to change the style of a DOM node, you HAVE to apply CSS rules to it. You can't get around that. If you don't want <td class="..."> to do that, then you'll have to do <td style="..."> instead. One way or another, you'll HAVE to write CSS for this to happen.