Responsive table - example

by Jordan Enev

HTML

<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Organization</th>
        <th>Event title</th>
        <th>Location</th>
        <th>Registration deadline</th>      
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>02.11.19</td>
        <td><img src="https://jiujitsulegacy.com/wp-content/uploads/2019/10/ibjjf-logo.png" width='100' /></td>
        <td>South American IBJJF Jiu-Jitsu No-Gi Championship</td>
        <td>São José, Brazil</td>
        <td>25.10.2019</td>
      </tr>
      <tr>
        <td>02.11.19</td>
        <td><img src="https://jiujitsulegacy.com/wp-content/uploads/2019/10/ibjjf-logo.png" width='100' /></td>
        <td>South American IBJJF Jiu-Jitsu No-Gi Championship</td>
        <td>São José, Brazil</td>
        <td>25.10.2019</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.table-responsive {
  overflow-x: auto;
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
}

.table-responsive th {
  text-align: center;
}

.table-responsive thead, .table-responsive tr {
  border-width: 2px;
  border-color: #333;
  border-style: solid;
}

.table-responsive td, .table-responsive th {
  padding: 25px;
  vertical-align: top;
}