How do I shrink the HTML audio element into a table cell?

Issue

I want the audio player to shrink if it doesn't have enough space.

Not to obscure the author column!

What am I missing here please?

table {
  width: 100%;
  table-layout: fixed;
}

<table>
  <thead>
    <td>Audio</td>
    <td>Author</td>
    <td>Title</td>
    <td>Distance (m)</td>
    <td>Uploaded (mins)</td>
  </thead>
  <tbody>
    <tr>
      <td>
        <audio controls>
          <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/%5B%3A%3A1%5D%3A37588/2022-01-02/test.m4a" type="audio/x-m4a" />
        </audio>
      </td>
      <td>[::1]:37588</td>
      <td>hahaha</td>
      <td>0</td>
      <td>224m ago</td>
    </tr>
    <tr>
      <td>
        <audio controls>
          <source src="https://local-audio-test.s3.ap-southeast-1.amazonaws.com/%5B%3A%3A1%5D%3A37562/2022-01-01/audio.m4a" type="audio/x-m4a" />
        </audio>
      </td>
      <td>[::1]:37562</td>
      <td></td>
      <td>11566426</td>
      <td>906m ago</td>
    </tr>
  </tbody>
</table>

Solution

Set your audio width to 100%:

audio {
  width: 100%;
}

It then takes up the full width of the parent cell, shrinking if appropriate.

Answered By - Brad