How to make a table responsive?

[SPEHE]

Hello,
I have a page where I have a simple table with tho columns. In the first column there is an image, and in the second some text. When I open the page in a mobile device it doesn’t look right.

I have tried a number of different things that I have googled, but without success. I am not a very good CSS man so any help would be deeply appreciated.

http://www.nordic-bulkers.se/index.php/gdpr-privacy

[Paulie_D]

What does “doesn’t look right” mean?

Frankly though, a table there isn’t really appropriate. We stopped using tables for layout 20 years ago.

[SPEHE]

Hi Paulie,
thanks for your answer. Yes, I am aware of the fact that it is not a good idea to use a table in a design, but for us without the css knowledge it is ok as long as you don’t look at the page on a mobile device. That is why I posted this help question here, to get some help on how to do it the right way.

The specific problem is that the content in the table does not align right. I would want it to centre on the screen, to fill it out.
I dont know how to attach an image to this post, otherwise I would have been able to show you.

But if you use the link in my original post and resize your screen, you will immediately see how the content sticks to the right side.

[Pogany]

In this case I would replace the table with p tags with a padding-left of 32px or bigger, and the image (icon) as a non repeating background.

[Paulie_D]

Solutiions are available but they involved changing the way tables actually work. For that reason I’d still recommend fresh HTML.

But if you must.

Remove the padding-left:50% from the td and remove display:block.

then add vertical-align:top.

Finally throw in

td:nth-child(2) {
    padding-left: 1em;
}

for some spacing.

[amit99]

just put this css using new class for this table.so it will not effect other tables.

@media (max-width: 480px) {

table.newclass tr td:nth-child(1) { width: 40px;float: left; position: absolute;}
table.newclass tr td:nth-child(2) {padding-left: 40px !important ;}

}

[SPEHE]

OK, I went for the answer from Pogany. Thanks!
I could not get it to work with the background image though.

So now the page looks like this
http://www.nordic-bulkers.se/index.php/2018-07-04-12-18-18
where the image is above the text, and it will work when I change the size of the browser. But what I really want is the image to be to the left of the text at full screen, and when the screen resizes it will move to be centered on top of the text.

Any help would be deeply appreciated.

[Pogany]

Thank you SPEHE. In fact I was thinking of something like this:
https://codepen.io/giaco/pen/KeLjyr

[ben_morgan]

Thx for the information.

[SPEHE]

Thanks Pogany. I must admit that I know next to nothing about css, so this helped me a lot. If I want the icon to move to the top of the text and center, when the screen size changes, would that be tricky?

[Pogany]

In this case you would need to add a media query. For example if your breaking point is at 480px

@media only screen and (max-width:480px) {
.former-table p {
  padding-top: 45px;
  padding-left:0;
  background-position: top center; 
  background-repeat: no-repeat;
}
}

https://codepen.io/giaco/pen/KeLjyr

[SPEHE]

Beautiful. Exactly as I wanted it!
Thanks for all your help Pogany!

[Author]

Posts