Responsive Table dengan CSS

Halo teman teman webmaster dumet school kali ini saya akan membahas bagaimana membuat Responsive table dengan CSS. Tentunya kita tidak akan mengalami maslah ketika kita mungkin sedang membuka aplikasi web kita di monitor, namun akan berantakan bila kita buka aplikasi kita di smartphone atau handphone atau pun tablet, anah bagai mana cara mengatasi , yaitu dengan dengan responsive Table CSS. yuk kita praktekan bagai mana cara membuat nya.

siapkan file index.html, dan berikut strukturnya.

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Tabel Responsive dengan CSS</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div>
  <h2> Table Responsive CSS</h2>
  <table>
    <tr>
      <th> Nama Depan </th>
      <th> Nama Belakang </th>
      <th> Nilai </th>
      <th> Nilai </th>
      <th> Nilai </th>
      <th> Nilai </th>
      <th> Nilai </th>
      <th> Nilai </th>
      <th> Nilai </th>
      <th> Nilai </th>
      <th> Nilai </th>
      <th> Nilai </th>
    </tr>
    <tr>
      <td> Arif </td>
      <td> Dumet </td>
      <td> 70 </td>
      <td> 70 </td>
      <td> 70 </td>
      <td> 70 </td>
      <td> 70 </td>
      <td> 70 </td>
      <td> 70 </td>
      <td> 70 </td>
      <td> 70 </td>
      <td> 70 </td>
    </tr>
    <tr>
      <td> Andri </td>
      <td> Winata </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
    </tr>
    <tr>
      <td> Dean </td>
      <td> Andre Agasi </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
      <td> 90 </td>
    </tr>
  </table>
</div>

</body>
</html>

begini tampilan struktur table di atas.

kita buat CSS nya sekarang, seperti berikut

div{
  overflow-x: auto;
  width: 50%;
  margin: auto;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

bila kita buka di ukuran tablet maka kita bisa scroll table tersebut teman teman. begitupun ketika kita buka di handpohone atau smratphone.

sekian tutorial Responsive Table dengan CSS. Semoga bermanfaat yah teman teman.

Kategori