Css Table (display: table) with nested divs

Question

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 class="row">
          <div class="nestedDiv"> <!-- nested div, this will not work -->
            <div class="col">Column A</div>
            <div class="col">Column B</div>
            <div class="col">Column C</div>
          </div>
        </div>
        <div class="row">
          <div class="col">1</div>
          <div class="col">2</div>
          <div class="col">3</div>
        </div>
    </section>
  </body>
</html>

If it's tabular data should you not just use a table otherwise you are not really semantically correct and screen readers will have a tough time with it, but in answer to your question, no you can't have a nested div - it would be like putting a div in an actual tr — Pete
– Pete, Commented Nov 15, 2022 at 13:26

Alohci · Accepted Answer · 2022-11-15 13:57:58Z

2

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 class="row">
          <div class="nestedDiv"> <!-- nested div -->
            <div class="col">Column A</div>
            <div class="col">Column B</div>
            <div class="col">Column C</div>
          </div>
        </div>
        <div class="row">
          <div class="col">1</div>
          <div class="col">2</div>
          <div class="col">3</div>
        </div>
    </section>
  </body>
</html>

answered Nov 15, 2022 at 13:57

Alohci

84.2k16 gold badges121 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam · Accepted Answer · 2022-11-15 13:28:08Z

0

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 class="col">Column A</div>
  <div class="col">Column B</div>
  <div class="col">Column C</div>
  <div class="col">Column D</div>
</div>
<div class="col">Column XXX</div>
<div class="col">Column YYY</div>
<div class="col">Column ZZZ</div>

answered Nov 15, 2022 at 13:28

Adam

6,1192 gold badges9 silver badges28 bronze badges

Collectives™ on Stack Overflow

Css Table (display: table) with nested divs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related