Creating a responsive table

I’m trying to create a responsive table in a container using a row of 3 columns.

I’m trying to create a table with sub-headers and strokes to create a single bar in a lighter shade to the main header. I’m using the strokes to create the table.

The row includes 3 columns. It appears the far left and right columns have an overlap on both sides. So when I add a container or a section and colour the background, I get a gap between columns 1-2, and an overhang on column 3. See below.

I’ve enabled a troubleshooting link here: https://webflow.com/design/tshootflow?preview=8c8ac31d213e6d9afe2aab964ffec6be

I’m sure it’s something simple but I can’t seem to nail it. Any ideas?

Thanks!

Hi @grandtheftpixel By default the columns have 10px padding on the left and right. What you can do is select the left column and replace left and right padding with 0.

Also, a tip for you - use Container elements only when you want to center content inside of the browser window (dropping it into the section or dropping it into the body. The Block element (div in html) is good for general purpose wrapping - what you’re using the container for right now).

1 Like

Thanks @thesergie! That worked perfectly. Thanks for the tip.

This topic was automatically closed after 10 days. New replies are no longer allowed.