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

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/[::1]:37588/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/[::1]:37562/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>

CodePudding user response：

Set your audio width to 100%:

audio {
  width: 100%;
}

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

CodePudding user response：

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/[::1]:37588/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/[::1]:37562/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>