如何将 HTML 音频元素缩小到表格单元格中？

Question

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>

Answer 1

Set your audio width to 100%:

audio {
  width: 100%;
}

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

Answer 2

You may add audio width to your but it some times doesn't show the entire control, so you use width property as well as the hover to show the full control when needed.

 audio {
  width: 100%;
 }

 .float:hover {
   width:300px;
}

Or you should change the cell width of the whole audio column.

 .head-audio {
   width:400px;  
 }

Don't forget to add the class in HTML,

 <table >
     <thead>
         <td class = "head-audio">Audio</td>
         <td>Author</td>
         <td>Title</td>
         <td>Distance (m)</td>
         <td>Uploaded (mins)</td>
     </thead>
  <tbody>
  <tr>
      <td class = "head-audio">
          <audio class = "float" 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 class = "head-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>