Bagaimana membuat: tabel harga yang responsif

Belajar cara menggunakan CSS untuk membuat tabel harga yang responsif.

  • Dasar
  • $ 9.99 / tahun
  • 10GB Storage
  • 10 Email
  • 10 Domains
  • 1GB Bandwidth
  • Daftar
  • Pro
  • $ 24.99 / tahun
  • 25GB Storage
  • 25 Email
  • 25 Domains
  • 2GB Bandwidth
  • Daftar
  • Premium
  • $ 49.99 / tahun
  • 50GB Storage
  • 50 Email
  • 50 Domains
  • 5GB Bandwidth
  • Daftar

Coba sendiri

Bagaimana membuat tabel harga yang responsif

Langkah pertama - Tambahkan HTML:

<div class="columns">
  <ul class="price">
    <li class="header">Dasar</li>
    <li class="grey">9.99 / tahun</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Daftar</a></li>
  </ul>
</div>

Kesadaran kedua - Tambahkan CSS:

* {
  box-sizing: border-box;
}
/* Membuat tiga kolom yang sama lebar */
.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}
/* Mengatur gaya daftar */
.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
/* Menambah bayangan saat mouse berada di atas */
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* Judul tabel harga */
.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}
/* Item daftar */
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}
/* Daftar item warna */
.price .grey {
  background-color: #eee;
  font-size: 20px;
}
/* Tombol "Daftar" */
.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}
/* Saat lebar layar kurang dari 600px, ubah lebar tiga kolom menjadi 100% (untuk menggumpal di layar kecil) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}

Coba sendiri