Fungsi dari Properti Border-Collapse di CSS

Halo semuanya 🙂 awal bulan telah tiba ya tak terasa , sekarang ini telah di gajian kan ? hahaha.  Oke kali ini saya akan membahas mengenai properti di css , properti yang akan kita bahas kali ini yakni Manfaat Dari Properti Border-Collapse DI CSS . Manfaat dari border-collapse yakni bagi membangun model border yang spesifik di table.

Biasanya sekiranya kita ingin membangun border di table kita tinggal beri properti border saja telah lumayan, tetapi ada satu properti yang memungkinkan memberi border di table yang lebih spesifik lagi modelnya.  Oke saatnya praktek.

 

ada tiga value di 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;
}

 

 

Ketika di jalankan hasilnya akan seperti ini :

 

Oke itu saja bagi kali ini, hingga bertemu di artikel yang lainya.

Terimakasih.

Sumber https://kursuswebsite.org