Tables in units are too wide

[Physiotutors]

Hello so when we copy and paste tables from Word into a unit they are too wide. We styled table columns and rows as follows

td, th {
padding: 10px;
border: 1px solid #000;
}

however the tables depending on the content are too wide see: https://ibb.co/3s4F7fF can you provide us with the necessary code that will make the tables stay in the container?

[Physiotutors]

This reply has been marked as private.

[Ada]

Hi, Please share the course URL and the unit name so that I can check and provide customized code accordingly.

[Physiotutors]

This reply has been marked as private.

[Ada]

Hi, You can use this css code to manage the width of table inside unit. Add the code in appearance>>customize>>custom css

.main_unit_content table {
    max-width:800px !important;
}

[Physiotutors]

Hey thanks for providing this code however this doesn't seem to work. The tables still exceed the container. I have checked in an incognito window and flushed cache. Could you take another look please?

[Ada]

Hi, Checked on your site today. And the table is inside container . see https://drive.google.com/file/d/1r_VFfmmvrrlGcpNnmLUoL1I50ayrhTkt/view

[Physiotutors]

This reply has been marked as private.

[Ada]

Hi, Yes for the responsive table view please replace the previous code with this and then check

@media(max-width:600px){
   .main_unit_content table {
       
    max-width: 310px !important;
}
}
@media(min-width:600px){
    .main_unit_content table {
    max-width: 410px !important;
}
}
@media(min-width:800px){
    .main_unit_content table {
    max-width: 720px !important;
}
}

[Physiotutors]

Thanks Ada It collapses on the browser but when I access the unit on my iPhone it's still not visible completely. So I guess the breaking points are not adequate (for this device) is there no way to have it break fluently? see: https://ibb.co/7XG7nkd

[Ada]

This reply has been marked as private.

[Physiotutors]

Thanks that seems to work. can we have a CSS rule for all unit tables to be width 100%?

[Ada]

Hi, Yes you can use this css code but it would not work if any inline style is added in the table so add this inline style inside the table which is not responsive.

    style="overflow-x:auto !important"

and this is the css code for full width of table.->

.main_unit_content table {
    width:100% !important;
}

[Physiotutors]

Thank you Ada! This works great. Topic can be closed

[Ada]

okay :) Thank-you for confirmation. Closing.

[Author]

Posts