Adding a border between rows

Hi,

thanks for your post, and sorry for the trouble.

The horizontal border is actually the default, and if you remove the Custom CSS that removes the borders again, it should appear.

Regards,
Tobias

Thanks I’ve done that, but on mobile you’ll see that the first row where it references 888 Casino – it doesn’t have the horizontal lines when stacked. Do you know how to ensure this looks the same as the other rows?

Is there any way to make these look like nice visual blocks when stacked on mobile?

Hi,

you could maybe try “Custom CSS” like

@media screen and (max-width: 768px) {
    .tablepress-id-32 tbody td {
        border: none;
    }
    .tablepress-id-32 tbody tr {
        display: block;
        border: 2px solid #333333;
        margin-bottom: 5px;
    }
}

Regards,
Tobias

That’s perfect – thank you!

Lastly – I want to increase the width of column of 5 since the button is squashed. I’m finding it hard to do this without making it look unaligned when it displays via mobile. Do you know how I might be able to achieve this?

Many thanks,
Aman

Hi,

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

.tablepress-id-32 .visitbutton {
  white-space: nowrap;
}

Regards,
Tobias

Awesome! Thankyou Tobias!

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!