1

I am displaying some non-tabular information using a tabular layout, attempting to create an accordion functionality without jquery. What I am attempting to do should look similar to the following:

// HTML
<div class="table">
  <div class="row header">
    <span class="cell">ABCDEFGHIJ</span>
    <span class="cell">1234567890</span>
  </div>
  <div class="content">
    <div class="row">
      <span class="cell">ABCDEFGHIJ</span>
      <span class="cell">1234567890</span>
    </div>
    <div class="row">
      <span class="cell">ABCDEFGHIJ</span>
      <span class="cell">1234567890</span>
    </div>
  </div>
</div>

/* CSS */
.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
  width: 100%;
}

.cell {
  display: table-cell;
}

.content {
  width: 100%;
}

The above doesn't work as intended, however. I tried changing the content <div> to different combinations of class names but the nested rows do not span across the entire width of the outer table in both cases, only within the first column.

If I am using actual tables, the above can be resolved using multiple <tbody> to implement the accordion. However, best practices would recommend contexts such as mine to not use tables, for which I am unable to find any relevant solution online. What is an equivalent solution for my problem?

1
  • The display for <tbody> tag is table-row-group
    – user6360214
    Commented Sep 2, 2016 at 2:04

1 Answer 1

2

Use display: table-row-group solves your problem.

.content {
  display: table-row-group;
}

Example below. Cheers!

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

.row {
  display: table-row;
  width: 100%;
}

.cell {
  display: table-cell;
  border: 1px solid red;
}

.content {
  display: table-row-group;
}
<div class="table">
  <div class="row header">
    <span class="cell">ABCDEFGHIJ</span>
    <span class="cell">1234567890</span>
  </div>
  <div class="content">
    <div class="row">
      <span class="cell">ABCDEFGHIJ</span>
      <span class="cell">1234567890</span>
    </div>
    <div class="row">
      <span class="cell">ABCDEFGHIJ</span>
      <span class="cell">1234567890</span>
    </div>
  </div>
</div>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.