Tambahkan spasi antar sel (td) menggunakan css

90

Saya mencoba menambahkan tabel dengan spasi antar sel karena warna latar belakang sel putih dan warna latar belakang tabel berwarna biru, Anda dapat dengan mudah melihat padding dan margin tidak berfungsi (saya menerapkannya ke td), itu hanya akan menambah ruang di dalam sel.

html css Amra
sumber
2
kemungkinan duplikat dari Bagaimana mengatur cellpadding dan cellspacing di CSS?
pengguna

Jawaban:

116

Anda ingin border-spacing:

<table style="border-spacing: 10px;">

Atau di blok CSS di suatu tempat:

table {
  border-spacing: 10px;
}

Lihat quirksmode aktif border-spacing. Ketahuilah bahwa border-spacingini tidak berfungsi di IE7 dan di bawahnya.

Dominic Rodger
sumber
2
di IE7 dan di bawahnya, Anda dapat menggunakan atribut spasi sel di tag tabel. Anda dapat menyediakan keduanya untuk membuatnya berfungsi di IE juga. Browser lain akan memprioritaskan gaya.
Tor Valamo
36 
table { 
  border-spacing: 10px; 
}

Ini berhasil untuk saya setelah saya dihapus 

border-collapse: separate;

dari tag tabel saya.

Kelly
sumber
1
terpisah bukannya terpisah, tetapi itu membantu saya :-)
FredRoger
Ya tidak tahu Anda harus mengubah 'perbatasan-runtuh' juga. Ini harus menjadi jawaban yang benar.
jleggio
31

Punya saya:

border-spacing: 10px;
border-collapse: separate;
JanBorup
sumber
1
saya perlu menambahkan properti css boder-collapse agar margin terpengaruh. terima kasih
ufk
4

Pertimbangkan penggunaan atribut cellspacingdan cellpaddinguntuk properti tabletag atau border-spacingcss.

Kniganapolke
sumber
4

parameter cellspacing (jarak antar sel) dari tag TABLE persis seperti yang Anda inginkan. Kerugiannya adalah satu nilai, digunakan baik untuk x dan y, Anda tidak dapat memilih spasi atau padding yang berbeda secara vertikal / horizontal. Ada juga properti CSS, tetapi tidak didukung secara luas.

SF.
sumber
2

Misalkan cellspcing/ cellpadding/ border-spacingproperty tidak berfungsi, Anda dapat menggunakan kode sebagai berikut.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

Saya sudah mencoba dan berhasil saat memisahkan tombol dengan menggunakan lebar tabel dan membuat td kosong sebagai 2 atau 1% tidak mengembalikan lebih berbeda.

Ram
sumber
0

Jika Anda ingin memisahkan nilai untuk sisi dan atas-bawah.

<table style="border-spacing: 5px 10px;">
obliviJohn
sumber