CODEWITHSUNDEEP
htmlcssresponsive
Junior
Junior

Reputation: 557

responsive table in HTML/CSS with first cell acting as a full row

I need to create a responsive table in HTML/CSS. I need that first cell of the row acts as a full row when the space becomes tight, just like below. In any situation, colums (c2, c3, c4) should remains vertically aligned (cells one below the other), just like a normal table. Any idea?

Normal view:

+-----------------------+--------+------+------+
|           c1          |   c2   |   c3 |  c4  |
+-----------------------+--------+------+------+

Mobile view:

+---------------------+
|           c1        |
+---------+------+----+
|   c2    |   c3 | c4 |
+---------+------+----+
|           c1        |
+---------+------+----+
|   c2    |   c3 | c4 |
+---------+------+----+

Upvotes: 0

Views: 315

Answers (2)

Jon P
Jon P

Reputation: 19802

Yes this is possible with media queries, but this particular approach is ugly and involves duplication.

Have a dedicated row for mobile. Hide and show this row with media queries. Use the same media query to hide the cell on mobile.

#table {
  width: 100%;
}

.mRow {
  display: none;
}

@media (max-width: 500px) {
  .mRow {
    display: table-row;
  }
  .dCell {
    display: none;
  }
}
<table id="table" cellspacing="0" border="1">
  <!-- this row is hidden by default, shown with a media query -->
  <tr class="mRow">
    <td colspan="3">C1</td>
  </tr>
  <tr>
    <!-- this cell hidden on mobile with a media query -->
    <td class="dCell">C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
  <!-- this row is hidden by default, shown with a media query -->
  <tr class="mRow">
    <td colspan="3">C1</td>
  </tr>
  <tr>
    <!-- this cell hidden on mobile with a media query -->
    <td class="dCell">C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
</table>

Upvotes: 1

jo_va
jo_va

Reputation: 13973

This can be done using a grid layout.

Here I am using JavaScript to toggle classes on and off to show how the styling can change. However, you can achieve the same effect through media queries by not defining the span.mobile and .grid.mobile styles when the size is bigger than a specified breakpoint.

See this article for more information on how to make a responsive table using a grid.

const elements = document.querySelectorAll('.mobile');
setInterval(() => {
  elements.forEach(el => el.classList.toggle('mobile'));
}, 1000);
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid black;
  border-right: 1px solid black;
}

/* toggle below style with a media query */
.grid.mobile {
  grid-template-columns: repeat(3, 1fr);
}

.grid > span {
  padding: 4px 4px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

/* toggle below style with a media query */
span.mobile {
  grid-column: 1 /4;
  font-weight: bold;
  text-align: center;
}
<div class="grid mobile">
  <span class="mobile">c1</span>
  <span>c2</span>
  <span>c3</span>
  <span>c4</span>
  <span class="mobile">c1</span>
  <span>c2</span>
  <span>c3</span>
  <span>c4</span>
  <span class="mobile">c1</span>
  <span>c2</span>
  <span>c3</span>
  <span>c4</span>
</div>

Upvotes: 1

Related Questions