0

Tables to be used for tabular data. Divs to be used for layout. This is what I get out of this thread.

.table {
    display: table;
    padding: 5px;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    padding: 5px;
    width: 150px;
    border: #000000 solid 1px;
    margin: 5px;
}
<div class="table">
    <div class="tr">
        <div class="td">Row 1,
            <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
    <div class="tr">
        <div class="td">Row 2,
            <br />Column 1</div>
        <div class="td" style="background:#888888;"></div>
    </div>
</div>

But the first most 'layout feature' I'm looking for relates to table's colspan, rowspan.
How can I implement the same behavior using divs?

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
Mike
  • 20,010
  • 25
  • 97
  • 140
  • 1
    When I need a tabulated layout .. I use the [Bootstrp Grid Layout](https://getbootstrap.com/docs/4.0/layout/grid/) It allows for pretty flexible ability to have table-like functionality (including `colspan` and `rowspan` -ish functionality) – Zak Apr 19 '21 at 21:15
  • 1
    [CSS grids](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) are more powerful, flexible and less full of class name soup than Bootstrap's flexbox based approach. – Quentin Apr 19 '21 at 21:25

0 Answers0