Responsive Table, img not centered smartphone

[jefferis]

I am using modified code from this link: https://css-tricks.com/responsive-data-tables/

It works well except for a table of images in the footer (BBB and Paypal images at http://diamondseller.com)
I’ve tried all sorts of CSS to center the images. I had to remove the padding left because the images were right aligned. But now they are left aligned and not centered.
I don’t know if this is because the table has no “th” row and if possible, I’d appreciate and explanation of the td: vs td:before and how that might be affecting the outcome. This table was basically a single row table with no header.

TIA,
Jeff

[wahhabb]

Hi, Jeff,

You have the following from the css-tricks article:

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

By setting position:absolute and left:6px, you are forcing your table elements to show up 6 pixels from the left of their container. In the tutorial, this is what he wants: he uses padding-left:50% on the td to make the content start at the center, and pushes the title in on the left with absolute positioning. You don’t want that.

If that’s not enough to make things clear, create a codepen with just the bottom table, and I’ll edit it to fix the problem.

[Author]

Posts