CODEWITHSUNDEEP
csshtml-table
thelolcat
thelolcat

Reputation: 11545

How do I emulate a table with divs & css?

A table like this one:

<table>

  <tr>
   <td> ... </td>
   <td> ... </td>
   <td> ... </td>
  </tr>

  <tr>
   <td> ... </td>
   <td> ... </td>
   <td> ... </td>
  </tr>

  ...
</table>

How can I create one using div and css display:table rules ?

Upvotes: 9

Views: 13143

Answers (1)

rjanjic
rjanjic

Reputation: 2694

Try this ;)

CSS

.table {
    display: table;
    width: 500px;
}
.tr { 
    display: table-row; 
}
.td { 
    display: table-cell;
}

HTML

<div class="table">
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
</div>

Upvotes: 33

Related Questions