Responsive Table

by Soviut

HTML

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>
        <dl>
          <dt>Heading 1</dt>
          <dd>column 1</dd>
        </dl>
      </td>
      <td>
        <dl>
          <dt>Heading 2</dt>
          <dd>column 2</dd>
        </dl>
      </td>
      <td>
        <dl>
          <dt>Heading 3</dt>
          <dd>column 3</dd>
        </dl>
      </td>
    </tr>

    <tr>
      <td>
        <dl>
          <dt>Heading 1</dt>
          <dd>column 1</dd>
        </dl>
      </td>
      <td>
        <dl>
          <dt>Heading 2</dt>
          <dd>column 2</dd>
        </dl>
      </td>
      <td>
        <dl>
          <dt>Heading 3</dt>
          <dd>column 3</dd>
        </dl>
      </td>
    </tr>

    <tr>
      <td>
        <dl>
          <dt>Heading 1</dt>
          <dd>column 1</dd>
        </dl>
      </td>
      <td>
        <dl>
          <dt>Heading 2</dt>
          <dd>column 2</dd>
        </dl>
      </td>
      <td>
        <dl>
          <dt>Heading 3</dt>
          <dd>column 3</dd>
        </dl>
      </td>
    </tr>
</tbody>
</table>

CSS

table, thead, tbody, tr, th, td {
  border-collapse: collapse;
}

th, td {
  padding: 5px;
  border: solid 1px #CCC;
}

dl {
  display: flex;
  margin: 0;
}

dd {
  margin: 0;
}

dt {
  display: none;
  margin-right: 20px;
}

@media (max-width: 480px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }

  thead {
    display: none;
  }
  
  dt {
    display: block;
    font-weight: bold;
  }
  
  tr {
    border: solid 1px #CCC;
    margin: 5px 0;
  }
  
  th, td {
    border: 0;
  }

}