Create a 2x5 table with borders

Hello,
Question:
I am trying to create a table like here in Wix Studio, but I have not bee able to.
What is the right way of creating the same table?

Product:
Wix Studio

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]

What have you already tried:
I have tried creating a repeater, but the problem with the repeater is that I cannot have different image colors, the icons you see, are png files, and their background colors is set for each one. The second thing I have tried is creating a two columns table with the first column of icons, and the second column is the repeater. However, I am facing trouble first of all in having the border lines exactly work like the link above, and second of all if I only do a repeater, and want to put the lines, I get lines that are twice as thick because the items are on top of each other.

Additional information:
PS: the link provided showing the table I want to to is made on Wix Editor

I would use CSS grids

How would you deal with the borders?

add a border to the cell in the inspector panel on the right.

but using that, you will get double borders in collapsing cells.

How are you collaping them ? that wasnt mentioned so didnt take into account.

You could also do borders through CSS

p {
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
}

Thanks for the reply. I am trying to create the same table than here https://frank16522.wixsite.com/nopalmagmarch/solutions
It is pretty difficult to create such a table

just threw this together quickly with section grids, added borders to cells. Is that what you are trying to build ?

https://dcidesigns.wixstudio.io/locked

Yes it is very close! However, there are double borders on the rows


Left-most row seems much thinner than horizontal and vertical on the right of the orange icon.
In any case, how were you able to do that table? Can you please let me know?

Thanks!

Hey! Can you please tell me how you were able to do the table and have different colors on the left, since a repeater does not let you have different colors?

Thanks

because it was made with section grids, you can change the background colours to what ever you want. Still couldnt fix the double border issue, even with CSS (but havnt really had a chance to sort it out yet as work has been hectic)

1 Like

The double borders are negligible, but if you want to be pixel perfect, then you can add a padding around the table which will be the same as your border width. But first you will need to place the table inside a container or something.

So lets say your border width is 2px, you will have to set a 2 px padding on for the table from all sides, and then change the color of the background container to match the color of the border.

1 Like

Please let me know if you are able to get it.