Jeda garis bootstrap di antara baris

Tugas hari ini adalah membuat ruang di antara dua baris dalam sebuah tabel. Spasi antara dua baris dalam a dapat ditambahkan dengan menggunakan properti CSS border-spacing dan border-collapse. Properti border-spacing digunakan untuk mengatur spasi antar sel tabel, dan properti border-collapse menentukan apakah batas tabel diciutkan atau tidak. Properti border-spacing hanya dapat digunakan ketika properti border-collapse diatur ke "terpisah"

Mari kita lihat contoh dan tunjukkan cara melakukannya langkah demi langkah

• Tempatkan

  tag di bagian

• Tempatkan

  dan

  tag dan tulis beberapa konten di dalamnya

• Tempatkan

  

    
W3docs
    
Row spacing in a table
    
      
        Employee ID
        Name
        Gender
        Age
      
      
        10001
        Tom
        M
        30
      
      
        10002
        Sally
        F
        28
      
      
        10003
        Emma
        F
        24
      
    
  

• Gunakan properti border-collapse dengan nilai "terpisah" untuk tabel
• Gunakan properti border-spacing untuk mengatur jarak antara batas sel tabel yang berdekatan
• Untuk baris pertama, atur warna background dan warna teks dengan menggunakan properti background-color dan color
• Atur lebar dan bantalan baris
• Gunakan properti perataan teks dengan nilai "pusat" yang menyelaraskan teks ke tengah
• Anda dapat membuat batas di sekeliling sel tabel dengan menggunakan properti perbatasan dan menggunakan properti lebar batas, gaya batas, dan warna batas
• Anda dapat mengatur warna dari

  elemen dokumen dengan menggunakan properti warna. Selain itu, Anda dapat memilih warna apa pun dari pemilih warna kami

table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

th {
  background-color: #4287f5;
  color: white;
}

th,
td {
  width: 150px;
  text-align: center;
  border: 1px solid black;
  padding: 5px;
}

h2 {
  color: #4287f5;
}

Berikut adalah hasil dari kode kita

  
    Title of the document
    
  
  
    

      
W3docs
      
Row spacing in a table
      
        
          Employee ID
          Name
          Gender
          Age
        
        
          10001
          Tom
          M
          30
        
        
          10002
          Sally
          F
          28
        
        
          10003
          Emma
          F
          24
        
      
    

  

Penspasian baris dalam tabelKaryawan IDNameGenderAge10001TomM3010002SallyF2810003EmmaF24

  
    Title of the document
    
  
  
    

      
W3docs
      
Row spacing in a table
      
        
          Employee ID
          Name
          Gender
          Age
        
        
          10001
          Tom
          M
          30
        
        
          10002
          Sally
          F
          28
        
        
          10003
          Emma
          F
          24
        
      
    

  

Dalam contoh pertama kami, untuk properti border-spacing, kami menggunakan nilai "0 15px" yang berarti ruang berada di antara baris horizontal. Dalam contoh kedua, kami menggunakan nilai "20px 0 " yang berarti ruang berada di antara baris vertikal

Mari berikan beberapa latar belakang ke meja kita untuk melihat apa yang sedang kita bicarakan, jadi

Dan inilah hasilnya

Bagaimana jika kita ingin batas dalam dihapus di antara kolom dalam contoh ini?

Oke, mari kita perbaiki ini bersama-sama

Hapus batas-keruntuhan. terpisah dan border-spacing. 20px 0 dari tabel CSS

Sekarang, kita akan menambahkan border-spacing. 20px 0 pada setiap td tabel kami, bukan seluruh tabel

Kita juga harus menambahkan properti tampilan dari blok agar berfungsi seperti yang kita inginkan

Jadi, perubahan kita akan seperti ini

table {
  background: khaki;
}
table tbody {
  display: block;
  border-spacing: 20px 0;
}

Hasilnya akan sama seperti sebelumnya. Sekarang, saatnya bagi kita untuk menghapus ruang batas luar kiri dan kanan. Itu bisa dilakukan dengan cepat hanya dengan menambahkan margin negatif ke kiri dan kanan setiap elemen td sehingga akan menghilangkan ruang itu untuk kita

Dan ini dia. Inilah tepatnya yang kami inginkan. Seperti yang Anda lihat, ruang luar kiri dan kanan telah digunakan untuk selamanya

Bagaimana cara menambahkan celah ke baris di Bootstrap?

Bagaimana cara membagi div menjadi 2 baris dalam HTML?

Bagaimana cara membuat baris responsif di Bootstrap?

Bagaimana cara membagi kolom menjadi dua baris di Bootstrap?