Home » How To » Cara Membuat Table Full-Width

Cara Membuat Table Full-Width

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajar cara membuat tabel full-width( lebar maksimum) dengan CSS.

Cara Membuat Tabel Full-Width

Untuk membuat tabel dengan lebar maksimum, gunakan width: 100%:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}
</style>
</head>
<body>

<h2>Full-width Table</h2>
<p>Use width: 100% to create a full-width table:</p>

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Johnson</td>
    <td>67</td>
  </tr>
</table>

</body>
</html>

You may also like