Menu icon Foundation
Table "hover" class on table head

I'm using Foundation 6.2.3 on a site where I need to use tables.

 

The table for event information works correctly. However when I add the hover class it also hovers on the table head making it illegible. I've created additional classes in my stylesheet to override the behaviour but that doesn't seem to work.

 

Any help appreciated, thanks.

 

Here's the table head code:

 

<table class="stack hover">
	
	
	
<thead class="text-center">
<tr class="table-head">
<th class="text-center">Date</th>
<th>Event</th>
<th class="text-center">Tickets</th>
<th class="text-center">Network</th>
<th class="text-center">Details</th>
</tr>
</thead>
	

tablehover

I'm using Foundation 6.2.3 on a site where I need to use tables.

 

The table for event information works correctly. However when I add the hover class it also hovers on the table head making it illegible. I've created additional classes in my stylesheet to override the behaviour but that doesn't seem to work.

 

Any help appreciated, thanks.

 

Here's the table head code:

 

<table class="stack hover">
	
	
	
<thead class="text-center">
<tr class="table-head">
<th class="text-center">Date</th>
<th>Event</th>
<th class="text-center">Tickets</th>
<th class="text-center">Network</th>
<th class="text-center">Details</th>
</tr>
</thead>
	
Rafi Benkual over 3 years ago

Added your code to a demo - http://codepen.io/rafibomb/pen/zBNZow

What part are you looking for guidance on? Can you replicate it in this codepen?