"Responsive Product Table" (#2812021) / TMS-Plugins

Comments

Pascal Block started the conversation
June 26, 2021 at 12:53pm
Hi there,

I really like the clean look of your responsive products table and wanted to built a similar looking table. I was wondering if you could share how you achieved the look? Did you use any CSS for it?

Thanks &

Best regards

Pascal

2,576

Aleksandar replied

June 28, 2021 at 9:52am

Hello Pascal.

Yes, we've added some custom CSS to that page:

.wpdt-c .wpDataTablesWrapper table.wpDataTable .even:hover > td
{
    background-color: #fff !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable .odd:hover > td{
    background-color: #fff !important;
}
@media screen and (min-width:1024px) and (max-width:1270px) {
    td.column-os,td.column-battery,td.column-price,td.column-weight,td.column-graphics,td.column-ram,
    th.column-os,th.column-battery,th.column-price,th.column-weight,th.column-graphics,th.column-ram{display:none;}
}
@media screen and (min-width:1270px) and (max-width:1560px) {
    td.column-os,td.column-display,td.column-battery,td.column-weight,td.column-ram,td.column-graphics,td.column-processor,td.column-harddisk,
    th.column-os,th.column-display,th.column-battery,th.column-weight,th.column-ram,th.column-graphics,th.column-processor,th.column-harddisk{display:none;}
}
@media screen and (min-width:1560px) and (max-width:1700px) {
    td.column-os,td.column-weight,td.column-graphics,th.column-os,th.column-weight,th.column-graphics{display:none;}
}

Also, the background color of the header, and it's borders have been changed to white with this CSS:

.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable thead th,
 .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th,
 .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting {
    border-color: #f2f2f2 !important;
}
.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable.bt[data-has-header='1'] td.wpdt-header-classes,
 .wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable thead th,
 .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th,
 .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting {
    background-color: rgb(255,255,255) !important;

Kind Regards,

Aleksandar Vuković
[email protected]

Rate my support

You can try wpDataTables add-ons before purchasing on these sandbox sites:

Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

1 Like

Pascal Block replied
June 28, 2021 at 12:53pm
Hi Aleksander,
thank you very much for your reply and sharing the custom CSS of the page!
Best regards,
Pascal
2,576
Aleksandar replied
June 29, 2021 at 9:38am
You're welcome, Pascal
Glad I could be of service.
If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.
Kind Regards,

Aleksandar Vuković
[email protected]

Rate my support

wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

You can try wpDataTables add-ons before purchasing on these sandbox sites:

Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables