CODEWITHSUNDEEP
csshtml-table
user13286
user13286

Reputation: 3075

Div table alternating rows 4 cells and 1 cell

I am creating a table using display:table; and I would like the odd numbered rows to have 4 columns but the even number rows to only have 1 column that spans 100% of the width of the table. Is this possible?

.table {
  display:table;
  table-layout:fixed;
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
}
  .table-row {
    display:table-row;
    border:1px solid #000;
  }
    .cell {
      display:table-cell;
      padding:10px 0;
    }
      .table-row:nth-child(odd) .cell {
        width:25%;
      }
      /* BELOW DOESN'T WORK */
      .table-row:nth-child(even) .cell {
        width:100%;
      }
<div class="table">
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
</div>

I know that by using a standard table, I could accomplish this using colspan, but I can't seem to find a CSS equivalent and I don't have the ability to modify the HTML structure.

Upvotes: 1

Views: 158

Answers (1)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

Unfortunately, CSS tables don't have any equivalent to colspan/rowspan attributes (yet), so it's impossible to have merged cells in CSS tables.

Given that you need a fixed layout with a repeating pattern of cell widths, I'd recommend to use Flexbox instead of CSS tables, like this:

.table { /* no special styles needed */ }
  .table-row {
    display: flex;
    border:1px solid #000;
  }
  .table-row:not(:first-child) {
    border-top: none; /* make inner borders thin */
  }
    .cell {
      flex: 1 0 0; /* this divides the row width equally between cells */
      padding:10px 0;
    }
<div class="table">
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
</div>

Upvotes: 1

Related Questions