Displaying MP3 files within a table

Using Pressbooks Adding Math or Interactive Content
1

Hello,

I have an author who wants to embed several MP3 files into a table. The table cells containing the MP3 files get wider each time. It looks fine in the visual editor but not in the preview. I get the same problem if I use TablePress too. See my test example below:

image
image524×211 8.28 KB

The code looks as follows:

image
image956×481 12.5 KB

Is there a way of reducing the width and applying a consistent width?

Thanks for your help,

Helen

2

Hi Helen. We’ve already responded to the author with a solution by email. Here is what we wrote:

Tables can be a bit tricky, as assigning fixed widths to columns can interfere with the entire table taking up 100% of the content width. In this case, as you have assigned a fixed width to each column, you can also assign a fixed width to the audio controls. Adding the following Custom CSS should make sure the audio controls are 200px wide (you can adjust this value to your liking).

table .mejs-container {
  max-width: 200px !important;
  width: 200px !important;
}
3

Thank you Mich, and in that case I’m so sorry to ask the same question twice!

4

No worries at all, Helen! This may be helpful to know for others as well.