Responsive and image with URL

Hi,

thanks for your post, and sorry for the trouble.

Just installing the Responsive Tables Extension is not enough, you will also have to choose a mode and adjust the Shortcode on the page.

Inserting an image with a link is no problem: Either use the “Insert Image” button and add the link URL to the “Target” text field after choosing the image. Or add the HTML code manually, so that you have a HTML structure like

<a href="..."><img src="..." /></a>

To add space between the columns, you can add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-1 {
    border-collapse: separate;
    border-spacing: 10px 0;
}

To highlight a column, you could e.g. add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-1 .column-2 {
  background-color: #ff0000 !important;
}

I don’t understand that last part of the question, with “data in one cell”, sorry ??

Regards,
Tobias

Thanks for the reply I almost placed everything.
As for the responsive what you mean I don't understand where I have to act. I'm not a webmaster.
Then to make the column change the color by highlighting it of another color I do not mean what you have suggested to me, but let's say similar so fixed so you suggested you but only to the passage of the mouse.

Then to better explain what I mean in the last part try everything you see in a column and put it inside a single cell with the different text settings, larger and smaller.
As here.
https://wpdatatables.com/faqmd/how-to-create-the-pricing-table-example-3/

Hi,

please follow https://tablepress.org/extensions/responsive-tables/ for instructions regarding responsiveness.

For different text sizes, etc. in the same cell, you need HTML and CSS code, like in the example on https://tablepress.org/faq/highlight-cells-or-content/ . For example, you could use multiple <span>s with CSS classes.

Regards,
Tobias

I did some tests
With these codes
[table id=1 responsive=flip responsive_breakpoint=”all”/]
[table id=1 responsive=stack responsive_breakpoint=”all”/]
[table id=1 responsive=scroll /]
[table id=1 responsive=collapse /]
I made some smartphone screenshots
https://ibb.co/gvV2fds
https://ibb.co/mH19r59
https://ibb.co/QMwFk2c
https://ibb.co/0DVLcXJ
https://ibb.co/HNxkXDC
https://ibb.co/YLB8shf
https://ibb.co/1LhXzZF

Nobody works well
But why, some are missing lines, they also change to the PC monitor, even if the monitor is large.
According to your knowledge on what can it depend?
In the end the most functional and that you understand a little is the one without responsive.

Do you have suggestions?

• This reply was modified 2 years, 4 months ago by dariotoby.

Hi,

for your table, which is not a “data table” but a “layout table”, these modes will indeed not give results that are too nice.
Your best chance probably is

[table id=1 responsive=scroll /]

Regards,
Tobias

I don’t understand why it now appears and works while yesterday did not seem exactly, it was black, you see it from black screensco.
Yes, I now works scroll I imagined it too.
Thank you infinite
I will use this.

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!