Audio tag in table in safari - audio

Question

I am inserting the <audio> tag into a table that uses a caption as the table title. In most browsers the caption appears at the top of the table, but in Safari it appears at the bottom of the table.
Tested on Safari 11 on Mac OS "el Capitan".
Note:
The caption only changes to the bottom when using the <audio> tag (without the <audio> tag, the caption appears at the top)
The audio plays fine.
Here's part of the HTML:
<table>
<caption class="paragraphheader">
Ordinal Numbers 0 to 9
</caption>
<tr>
<th scope="col">Number</th>
<th scope="col">Name</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<td>0<sup>th</sup> *</td>
<td>Zeroth <br /></td>
<td>"<span class="textblue">z</span>
<span class="textblue">ie</span>
<span class="textblue">r</span>
<span class="textorange">o</span>
<span class="textblue">th</span>"<br />
<audio controls controlsList="nodownload" preload="auto" style="width:66px">
 
The css related to tables:
table {
border-width: 1px;
border-style: ridge;
margin-left: inherit;
padding: 2px;
width: 98%;
float: right;
caption-side: top;}
td {
border-width: 1px;
border-style: inset;
padding:2px
}
th {
border-width: 1px;
border-style: inset;
}`
Here is the site (I'm still working on it, so may change)
http://www.simpleenglish.info/numbers-ordinal.html
This is driving me nuts! Any suggestions?