Fungsi dari Properti Border-Collapse di CSS

Halo semuanya 🙂 awal bulan telah tiba ya tidak terasa , sekarang sudah pada gajian kan ? hahaha.  Oke kali ini saya akan membahas tentang properti di css , properti yang akan kita bahas kali ini adalah Fungsi Dari Properti Border-Collapse DI CSS . Fungsi dari border-collapse adalah untuk membuat model border yang spesifik pada table.

Biasanya jika kita ingin membuat border pada table kita tinggal beri properti border saja sudah cukup, tetapi ada satu properti yang memungkinkan memberi border pada table yang lebih spesifik lagi modelnya.  Oke saatnya praktek.

 

ada tiga value pada properti border-collapse yaitu :

border-collapse: collapse | separate | inherit

Salin code berikut :

 

HTML //

<div class="container">
  <table class="separate">
    <caption><em>Separate border model</em></caption>
    <thead>
      <tr>
        <th>Header content 1</th>
        <th>Header content 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Footer content 1</td>
        <td>Footer content 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Body content 1</td>
        <td>Body content 2</td>
      </tr>
    </tbody>
  </table>
  <table class="collapsed">
    <caption><em>Collapsed border model</em></caption>
    <thead>
      <tr>
        <th>Header content 1</th>
        <th>Header content 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Footer content 1</td>
        <td>Footer content 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Body content 1</td>
        <td>Body content 2</td>
      </tr>
    </tbody>
  </table>
</div>

 

 

CSS//

body {
  background: #f9f9f9;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 20px auto 0;
  max-width: 900px;
  text-align: center;
}

table {
  margin: 1em;
  float: left;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #aaa;
}

th {
  background: #d1e9f8;
}

td {
  background: #eaf1fb;
}

caption {
  padding: .5em;
  color: #0099CC;
}

.separate {
  border-collapse: separate;
}

.collapsed {
  border-collapse: collapse;
}

 

 

Saat di jalankan hasilnya akan seperti ini :

 

Oke itu saja untuk kali ini, sampai bertemu pada artikel yang lainya.

Terimakasih.