Skip to content Skip to sidebar Skip to footer

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;
}
ul li{
  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;
}
<div class="grid">
  <div class="grid-row">
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST</div>
  </div>
   <div class="grid-row">
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST Test</div>
    <div class="grid-cell">TEST</div>
  </div>
</div>

Post a Comment for "Is It Possible To Use Td Elements Inside Div (without Table)?"