Như đã hứa, mình sẽ lại làm 1 loại bảng responsive trên blog với hình thức hấp dẫn một chút hoặc không đơn điệu. Nó sử dụng thẻ bảng ngữ gốc. Tức là, cách viết giống như khi tạo một bảng HTML thông thường. Nhưng nó là cần thiết để thêm một vài thuộc tính cho việc viết mã. Hãy đi thẳng vào nó.

Bảng đáp ứng với nhãn khi ở trên thiết bị di động

1. CSS

Thêm mã CSS sau vào chủ đề hiện tại.
table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 2rem 0;
  width: 100%;
}
th, td {
  padding: 1rem 1.5rem;
  text-align: left;
}
th {
  background-color: #008c5f; /* header background color */
  color: #fff; /* header text color */
  font-weight: 600;
}
tr {
  padding: 0;
}
td {
  vertical-align: middle;
}
tr:nth-child(even) td {
  background-color: rgba(0, 0, 0, .075); /* striped background color */
}
@media screen and (max-width: 640px) {
  thead, th {
    display: none;
  }
  tr, td {
    display: block;
  }
  tr {
    border: 1px solid rgba(0, 0 , 0 ,.15);
    margin-bottom: 2rem;
  }
  tr:last-child {
    margin-bottom: 0;
  }
  tr:nth-child(even) td {
    background-color: transparent;
  }
  td {
    clear: both;
    text-align: right;
  }
  td:before {
    content: attr(data-label)': ';
    float: left;
    font-weight: bold;
    margin-right: 1rem;
  }
}

2. HTML

Chỉ cần sao chép đoạn mã sau và thực hiện các thay đổi đối với văn bản theo văn bản bạn muốn xuất hiện.
<table>
  <thead>
    <tr>
      <th scope="col">Nama</th>
      <th scope="col">Email</th>
      <th scope="col">Domisili</th>
      <th scope="col">Nilai</th>
      <th scope="col">Langganan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Nama">Rain</td>
      <td data-label="Email">rain@email.com</td>
      <td data-label="Domisili">Sukabumi</td>
      <td data-label="Nilai">90</td>
      <td data-label="Langganan">Tidak</td>
    </tr>
    <tr>
      <td data-label="Nama">Yanfei</td>
      <td data-label="Email">yanfei@email.com</td>
      <td data-label="Domisili">Liyue</td>
      <td data-label="Nilai">100</td>
      <td data-label="Langganan">Ya</td>
    </tr>
    <tr>
      <td data-label="Nama">Hayley Williams</td>
      <td data-label="Email">hayley@email.com</td>
      <td data-label="Domisili">Jakarta</td>
      <td data-label="Nilai">97</td>
      <td data-label="Langganan">Ya</td>
    </tr>
    <tr>
      <td data-label="Nama">Natasha Romanoff</td>
      <td data-label="Email">nat@email.com</td>
      <td data-label="Domisili">Cianjur</td>
      <td data-label="Nilai">100</td>
      <td data-label="Langganan">Tidak</td>
    </tr>
    <tr>
      <td data-label="Nama">Fulan</td>
      <td data-label="Email">fulan@email.com</td>
      <td data-label="Domisili">Bandung</td>
      <td data-label="Nilai">60</td>
      <td data-label="Langganan">Tidak</td>
    </tr>
  </tbody>
</table>
Đó là hướng dẫn tạo bảng HTML đáp ứng chỉ với CSS. Tôi hy vọng lời giải thích là dễ hiểu.