Border of the custom table in mobile

SNA68 · March 2018

HI, I have a problem that I can't solve with the custom table.

This is my page
http://www.studionicolussi.cloud/linea-pellet/pellet/prova-prodotto-con-pagina-2
I set this CSS for costumize the table

table {
    border: 2px solid #595959;
    margin: 0;
    border-collapse: inherit;
    padding: 0;
    width: 100%;
}

th {
    background: #999999 !important;
    color: white !important;
}

tr:nth-child(even) {background-color: #dfddd7;}

tr:hover {background-color:#ffffff;}

In mobile the table is seen like this
https://prnt.sc/itpzqf
I tried to remove the CSS to see if it was the code that create the problem but it seen like this
https://prnt.sc/itq1ak
(the table however remains narrower than the page width)

I tried to change the style of the section in "Full Width" but nothing change.

Can you help me?
Thanks

Bryan · March 2018

Hi,
this is weird, try adding a class to this table and make the TD 100%,

table.myclass td { width:100%; }

SNA68 · March 2018

I tried but it doesn't work. Do you have any other suggestions?

Bryan · March 2018

But you cannot just use this css, you have to declare a class and make the TD elements 100%.
The problem is that you are using custom plugins and code, we cannot make sure that everything will work correctly then.
thanks

Border of the custom table in mobile

Comments