Stack questions

3) I added this text in the options:

.tablepress-id-117 tbody td {
	text-align: center;
}

But it seems the image is not aligning, while everything else is, see screenshot:
https://snipboard.io/gCpRub.jpg

I think it would be great if the content in every cell would be aligned in the center of the column and in the center of the row. Just everything right in the center of each cell. My table will have about 40 rows and 5 columns. Anyway I can set this so that the content of each cell is right in the center of each cell?

Hi Tobias,
I managed to center the image using this

.tablepress td img {
	margin: auto;
	display: block;
}

and the vertical align with this:

.tablepress tbody td {
    vertical-align: middle;
}

And they worked.

Just I have issue 1 and 2 still unsolved, if you have some insight?

Hi,

thanks for your post, and sorry for the trouble.

For the spacing, I recommend to add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media (max-width: 767px) {
  .tablepress-responsive-stack-phone {
    border-collapse: separate;
    border-spacing: 0 10px;
  }
}

For the images: The downloaded image file size will normally be the same (usually desktop), the image will only be shown in a scaled down manner. To optimize that, you could insert the images using the HTML srcset attribute, where actually different images (e.g. with different file sizes) can loaded by the browser. Depending on the configuration, this might actually be the case already.

Regards,
Tobias

Hi Tobias,
thanks for your reply.
I am working on it all day, I made a few changes, the page is not published yet, it’s offline so I don’t have a link to share but I took some screenshots.

The first problem is this:
https://snipboard.io/mjVF0e.jpg
I want all rows have the same height and the vertical images to be cropped into a square. I don’t want the image to just have a smaller height because there will be white spaces on the side otherwise, so it should actually be cropped into a square when the rows are made of the same height. How can I do that?

Second problem.
I used this code you gave me:

@media (max-width: 767px) {
  .tablepress-responsive-stack-phone {
    border-collapse: separate;
    border-spacing: 0 10px;
  }
}

But the problem is not solved. See:
https://snipboard.io/TiMKJL.jpg
basically I would like an empty space in between the rows (only in mobile view)

Thanks for your help!

Hi,

just from the screenshots, I’m not really able to debug or fix this ?? Can you maybe publish this page temporarily?

Regards,
Tobias

Hi Tobias,
the page is work in progress, so I cannot publish it for now. But I have a new problem. It seems the table is being buggy. Look at the following screenshots:

zoomed out view of the table:
https://postimg.cc/1g5dLL0m

zoomed in on two rows that behave differently:
https://postimg.cc/LnKbHqk0

see on the backend code is identical:
https://postimg.cc/k27YbkpQ

The table was uploaded from a CSV file

How do I fix this issue?

Hi,

I can only really investigate this on the live page, I’m afraid. I can then inspect the CSS code with the browser’s developer tools.
I would therefore suggest that you notify me once the site is online, and I’ll then take a look.

Regards,
Tobias

Hi Tobias,
I copy pasted a piece of the table into an old post, so you can investigate this here:

https://7i.se/Bh

Hi,

ah, thanks! Now I see it also in your backend code. If you look closely, in the left bottom corner of the screenshot https://postimg.cc/k27YbkpQ you will see that the quotation marks after word accounts looks different — it’s curly quotation marks “ instead of upright quotation marks ". This however breaks the HTML code structure, so that content from one cell is moved to the previous one.
To fix this, just replace all “ by the proper ".

Regards,
Tobias

Hi Tobias,
thank you! thank actually worked. I didn’t really think about that.

What about having a space in between rows in stack mode?
Please check this with the same test page. When you go in developer tools, and select mobile view, I would like a little space in between rows so that each profile looks like it’s in a “card” of its own, like this:
https://snipboard.io/TiMKJL.jpg

The space should only be in mobile view, while in desktop view I like it normal like it is now.

Can this be done?

• This reply was modified 3 years ago by Deon.

Hi,

can you then please enable the stack mode for this table?

Regards,
Tobias

Hi,
It was already enabled at the time of my previous reply. I guess you’re seeing a cached version, I will purge the cache. I can see it going in stack mode already when I resize the browser.

Hi,

thanks, now I can see the stacking!

To achieve this, please replace

@media screen and (max-width:768px) {

	.tablepress-id-109 thead th,
	.tablepress-id-109 tbody td {
		font-size: 11px;
	}

}

with

@media (max-width: 767px) {
    .tablepress-responsive-stack-phone {
        border-collapse: separate;
        border-spacing: 0 10px;
        border: none;
    }

    .tablepress-responsive-stack-phone td {
        border-left: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
    }
    .tablepress-responsive-stack-phone td:first-child {
        border-top: 1px solid #cccccc !important;
    }
    .tablepress-responsive-stack-phone td:last-child {
        border-bottom: 1px solid #cccccc;
    }
}

Regards,
Tobias

Hi Tobias,
thank you, that seems to do the trick!
Thank you

Hi,

great! Thanks for the confirmation!

Best wishes,
Tobias