如果沒有足夠的空間，我希望音頻播放器縮小。
不要掩蓋作者專欄！
請問我在這里缺少什么？
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>uj5u.com熱心網友回復：
將音頻寬度設定為 100%：
audio {
width: 100%;
}
然后它占據了父單元格的整個寬度，如果合適的話會縮小。
uj5u.com熱心網友回復：
您可以將音頻寬度添加到您的但有時不會顯示整個控制元件，因此您可以使用 width 屬性以及懸停在需要時顯示完整控制元件。
audio {
width: 100%;
}
.float:hover {
width:300px;
}
或者您應該更改整個音頻列的單元格寬度。
.head-audio {
width:400px;
}
不要忘記在 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401214.html
下一篇：平滑滾動CSS屬性