unable to make the tables responsive

Hi,

thanks for your question, and sorry for the trouble.

In your “Custom CSS”, you have the CSS code

.tablepress {
	width: auto;
	margin: 0 auto 1em;
}

Can you please remove that? It’s not necessary here, and after removing it, the table should be in full width in the stack mode.

Unfortunately, it’s not possible to also see the header row values in the stack mode, as that can’t be “split” between the many rows.

Regards,
Tobias

Working great now.

I also want to add borders to the table

And want the header to be displayed on the top/start of the table – not for each entry but just once at the top so that the readers don’t feel disoriented with what the rows represent in the table.

Thank you so much for all your help.

aspire2022.

By borders, borders/separators around each row.

Thanks
aspire2022

Hi,

for that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media screen and (max-width: 768px) {
  .tablepress-id-1 tr {
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
  }
}

Regards,
Tobias

Thank you Tobias.

This gives me the border for each entry but not the internal ones.

Please check this https://rb.gy/pegepm

It has a border+line separator for each element of the entered row

Also it has a header row fixed on the top/start of the table.

Want to have these two effects. Please guide.And thank you so much for helping with all my queries.

aspire2022

• This reply was modified 4 years, 7 months ago by aspire2022.
• This reply was modified 4 years, 7 months ago by aspire2022.

Hi,

okay, please also add this then:

@media (max-width: 767px) {
table.tablepress-id-1 thead {
	display: block;
}
.tablepress-id-1 thead tr,
.tablepress-id-1 thead th {
	display: block;
	width: 100% !important;
}
.tablepress-id-1 tbody td {
	border-top: 1px solid #cccccc !important;
}
}

Regards,
Tobias

And if I want this to be applicable on all tables on the site, I should remove the “-id-1” from the code. Am I right ?

Thanks
aspire2022

Hi,

yes, then you would use .tablepress instead of .tablepress-id-1.

Regards,
Tobias

A big thank you Tobias from all of us here for improving the reader’s experience at hod9.com

Thanks
aspire2022

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hi Tobias,

How to apply border on the sides of the table ?

Thanks
aspire2022

Hi,

for that, you can add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-252 {
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}

Regards,
Tobias

Thank you, again !

aspire2022

Hi,

always happy to help! ??

Best wishes,
Tobias