Bootstrap 4 Table Issues - html

Question

I'm currently making a template with Bootstrap 4. I have a table with four rows, here is the link to the said site: here.
Now with the CSS I have here for just the links:
a {
color: #F0FFFF;
}
a:visited {
color: #00FFFF;
}
a:hover {
text-decoration: none;
}
But at the fourth row, the fourth link does not follow the said CSS rules. My question is did I make a mistake on the CSS? Or does BootStrap 4 have a limit on Tables? With the BootStrap documentation, it shows examples of three rows only. Take a look here.

Answer 1

Here is the table HTML:
<table class="table table-striped table-inverse">
<thead>
<tr>
<th>Date</th>
<th>Area</th>
<th>Venue</th>
<th>Tickets</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">June 16, 2017</th>
<td>Auburn Hills, MI</td>
<td>Palace Of Auburn Hills</td>
<td><a href="#">
<button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 19, 2017</th>
<td>Los Angeles, CA</td>
<td>Los Angeles Memorial Coliseum </td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 23, 2017</th>
<td>Toyko, Japan</td>
<td>Nippon Budokan</td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 26, 2017</th>
<td>Hong Kong</td>
<td>Hong Kong Festival</td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Hey!
</button></a>
</td>
</tr>
</tbody>
</table>