Css Table (display: table) with nested divs-CodePudding

Is it possible to create a table layout using display:table, display:table-row and display:table-cell if table-cell is not a direct child of table-row ?

The example below would work if I remove the div with class nestedDiv, in such a way that the col divs are direct children of the row div.

Is this possible without altering the html structure?

section {
  display: table;
  width: 100%;
}

section .row {
  display: table-row;
}

section .col {
  display: table-cell;
}

<html>
  <head>
  </head>
  <body>
    <section>
        <div >
          <div > <!-- nested div, this will not work -->
            <div >Column A</div>
            <div >Column B</div>
            <div >Column C</div>
          </div>
        </div>
        <div >
          <div >1</div>
          <div >2</div>
          <div >3</div>
        </div>
    </section>
  </body>
</html>

CodePudding user response：

Yes, you can do that. Just set the .nestedDiv to display:contents

section {
  display: table;
  width: 100%;
}

section .row {
  display: table-row;
}

section .col {
  display: table-cell;
}

section .nestedDiv {
  display: contents;
}

<html>
  <head>
  </head>
  <body>
    <section>
        <div >
          <div > <!-- nested div -->
            <div >Column A</div>
            <div >Column B</div>
            <div >Column C</div>
          </div>
        </div>
        <div >
          <div >1</div>
          <div >2</div>
          <div >3</div>
        </div>
    </section>
  </body>
</html>

CodePudding user response：

Yes you can but it behaves unpredictably. table-cell elements on their own behave like inline-blocks however just wrapping one block with the display type table-row makes them behave like a table.

I use divs styled with table, table-row and table-cell elements sometimes to make responsive tables.

.col {
  display: table-cell;
  padding: 0.2rem;
}

.row {
  display: table-row;
}

<div class='row'>
  <div >Column A</div>
  <div >Column B</div>
  <div >Column C</div>
  <div >Column D</div>
</div>
<div >Column XXX</div>
<div >Column YYY</div>
<div >Column ZZZ</div>