Is It Possible To Use Td Elements Inside Div (without Table)?

I am trying to create very flexible grid, my code is approximately as

TEST &l

Solution 1:

Use a list element and set the child elements to inline.. Set list-style-type to none to remove the bulletpoints markers.

ul{
  list-style-type: none;
}
ulli{
  display: inline;
}

<ul><li>
  TEST
  </li><li>
  TEST
  </li></ul>

Also, your div issue.. that's divs desired behaviour since a div is a block element compared to span which is an inline-block element. You should either use spans or set div to inline-block.

Solution 2:

If you want a table layout then use display:table

.grid {
  display: table;
  border: 1px solid;
}

.grid-row {
  display: table-row;
  border: 1px solid red;
}

.grid-cell {
  display: table-cell;
  border: 1px solid green;
}

<divclass="grid"><divclass="grid-row"><divclass="grid-cell">TEST</div><divclass="grid-cell">TEST</div><divclass="grid-cell">TEST</div></div><divclass="grid-row"><divclass="grid-cell">TEST</div><divclass="grid-cell">TEST Test</div><divclass="grid-cell">TEST</div></div></div>

Share