Replacing flex with table / table-cell

HTML-CSS
1

How would I replace this flex with table / table-cell?
https://jsfiddle.net/5cjan42g/1/

.wrape {
  position: relative;
  width: 266px;
  overflow: hidden;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: 0 -168px;
  background-size: 100% 196.557%;
}

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.wrape .nav li {
  margin: 0;
  padding: 0;
  /* float: left; */
  background: blue;
}

.wrape .nav li a {
  display: flex;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
2

Why? What are you trying to achieve that the current code doesn’t do?

If it’s for browser compatibility you can use inline-block on the <li>s. Not sure what the purpose of the “Audio Player” text is inside the center <a> element but you will have to remove it or fix the <a>, one option is to use display: table; on it.

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  /* remove white space */
  font-size: 0;
}

.wrape .nav li {
  margin: 0;
  padding: 0;
  background: blue;
  /* set li to inline-block so they wrap */
  display: inline-block;
}

.wrape .nav li:nth-of-type(8) a {
  opacity: 0;
  border: none;
  background: none;
  /* fix for text inside the a element */
  display: table;
}
1 Like
3

I was just told this.

“Tables don’t wrap…you’d need to make rows.”

If I were to make it into rows how would it be written that way?

What would be changed in the code for rows to work?

4

I’m guessing you would write it a bit like a HTML table and give each row of li(s) a container and set it to display: table-row, then set each li to display: table-cell;. It will require both restructuring the HTML and CSS. All the :nth-of-type will need to be fixed and you can’t use the same ul/li structure like you are now.

1 Like
5

Hello there,
I have a similar problem, I’m trying to wrap the table cells to the next row on a smaller screen but I’m kinda abstruse. Please correct me if I’m wrong, if anything is getting overflowed, it’s the table row right? So defining tr { overflow -x: auto;} should work right? It’s not working for me. I’m trying to bring the cells in the next row in this

image
image417Ă—729 31.7 KB

6

hi @Shernz,

can’t undertand more if you dont share your link here .

7

I’ll share it. This is the URL for the form. The table is overflowing

8

Can I enclose the table inside a flexbox?

9

im not sure how to implement those in table inside table.

but i found intersting link that might help you with, as it have a lot of refference at the bottom page.

and this one

10

Thank you so much that means a lot