Spasi antara dua baris dalam sebuah tabel?

Apakah ini mungkin melalui CSS?

saya sedang mencoba

tr.classname {
  border-spacing: 5em;
}

tidak berhasil. Mungkin saya melakukan sesuatu yang salah?

Anda perlu menggunakan bantalan pada tdelemen Anda . Sesuatu seperti ini harus melakukan triknya. Anda bisa, tentu saja, mendapatkan hasil yang sama menggunakan bantalan atas bukan bantalan bawah.

Dalam kode CSS di bawah ini, tanda lebih besar berarti bahwa padding hanya diterapkan pada tdelemen yang mengarahkan anak-anak ke trelemen dengan kelas spaceUnder. Ini akan memungkinkan untuk menggunakan tabel bersarang. (Sel C dan D dalam contoh kode.) Saya tidak terlalu yakin tentang dukungan browser untuk pemilih anak langsung (pikirkan IE 6), tetapi seharusnya tidak memecah kode di browser modern.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Ini seharusnya membuat agak seperti ini:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Di tabel induk, coba pengaturan

border-collapse:separate; 
border-spacing:5em;

Ditambah deklarasi perbatasan, dan lihat apakah ini mencapai efek yang Anda inginkan. Berhati-hatilah, bahwa IE tidak mendukung model "separated borders".

Anda memiliki tabel dengan album id dengan data apa pun ... Saya telah menghapus trs dan tds

<table id="albums" cellspacing="0">       
</table>

Di css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

karena saya memiliki gambar latar belakang di belakang meja, berpura-pura dengan bantalan putih tidak akan berfungsi. Saya memilih untuk meletakkan baris kosong di antara setiap baris konten:

<tr class="spacer"><td></td></tr>

kemudian gunakan css untuk memberi baris spacer ketinggian tertentu dan latar belakang transparan.

Dari Jaringan Pengembang Mozilla :

Properti CSS spasi-batas menentukan jarak antara batas sel yang berdekatan (hanya untuk model batas yang terpisah). Ini sama dengan atribut cellspacing dalam HTML presentasi, tetapi nilai opsional kedua dapat digunakan untuk mengatur jarak horizontal dan vertikal yang berbeda.

Bagian terakhir itu sering diawasi. Contoh:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

MEMPERBARUI

Saya sekarang mengerti bahwa OP ingin baris yang spesifik dan terpisah untuk meningkatkan jarak. Saya telah menambahkan pengaturan dengan tbodyelemen yang menyelesaikannya tanpa merusak semantik. Namun, saya tidak yakin apakah itu didukung di semua browser. Saya membuatnya di Chrome.

Contoh di bawah ini adalah untuk menunjukkan bagaimana Anda dapat membuatnya tampak seperti tabel ada baris terpisah, manis penuh sesak nafas. Juga memberi spasi lebih pada baris pertama dengan tbodypengaturan. Jangan ragu untuk menggunakannya!

Pemberitahuan dukungan: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Anda dapat mencoba menambahkan baris pemisah:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Anda tidak dapat mengubah margin sel tabel. Tapi Anda BISA mengganti padding. Ubah padding dari TD, yang akan membuat sel lebih besar dan mendorong teks menjauh dari samping dengan padding yang meningkat. Namun, jika Anda memiliki garis perbatasan, tetap tidak akan persis seperti yang Anda inginkan.

Lihatlah border-collapse: atribut terpisah (default) dan spasi-perbatasan properti .

Pertama, Anda harus memisahkannya dengan border-collapse , lalu Anda dapat mendefinisikan ruang antara kolom dan baris dengan spasi-perbatasan .

Kedua properti CSS ini sebenarnya didukung dengan baik di setiap browser, lihat di sini .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Ok, bisa kamu lakukan

tr.classname td {background-color:red; border-bottom: 5em solid white}

Pastikan warna latar diatur pada td daripada baris. Ini harus berfungsi di sebagian besar browser ... (Chrome, mis. & Jika diuji)

Anda perlu mengatur border-collapse: separate;di atas meja; kebanyakan stylesheet default browser dimulai border-collapse: collapse;, yang membuang batas perbatasan.

Juga, penspasian batas: berjalan pada TD, bukan TR.

Mencoba:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Anda dapat menggunakan ketinggian garis dalam tabel:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Jawaban yang terlambat :)

Jika Anda menerapkan float ke trelemen, Anda bisa memberi spasi di antara dua baris dengan marginatribut.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Untuk membuat ilusi jarak antar baris, terapkan warna latar belakang ke baris dan kemudian buat batas tebal dengan warna putih sehingga "ruang" dibuat :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Cara yang benar untuk memberikan spasi untuk tabel adalah dengan menggunakan cellpadding dan cellspacing misalnya

<table cellpadding="4">

Saya menemukan ini saat berjuang dengan masalah yang sama. Saya menemukan jawaban Varun Natraaj cukup membantu, tetapi saya akan menggunakan perbatasan transparan sebagai gantinya.

td { border: 1em solid transparent; }

Batas transparan masih memiliki lebar.

Berfungsi untuk sebagian besar browser terbaru pada tahun 2015. Solusi sederhana. Ini tidak berfungsi untuk transparan, tetapi tidak seperti jawaban Thoronwen, saya tidak bisa transparan untuk membuat ukuran apa pun.

    tr {
      border-bottom:5em solid white;
    }

Cukup letakkan divdi dalam tddan atur gaya berikut div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Saya menyadari ini adalah jawaban untuk utas lama dan mungkin bukan solusi yang diminta, tetapi sementara semua solusi yang disarankan tidak melakukan apa yang saya butuhkan, solusi ini bekerja untuk saya.

Saya memiliki 2 sel tabel, satu dengan warna latar belakang, yang lain dengan warna batas. Solusi di atas menghilangkan batas, sehingga sel di sebelah kanan akan tampak mengambang di udara. Solusi yang melakukan triknya adalah mengganti table, trdan tddengan divs dan kelas yang sesuai: tabel akan menjadi div id="table_replacer", tr akan menjadi div class="tr_replacer"dan td akan menjadi div class="td_replacer"(mengubah tag penutup ke divs juga jelas)

Untuk mendapatkan solusi untuk masalah saya, css adalah:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Semoga ini bisa membantu seseorang.

Anda dapat mengisi elemen <td /> dengan elemen <div />, dan menerapkan margin apa pun ke div yang Anda suka. Untuk ruang visual di antara baris, Anda dapat menggunakan gambar latar berulang di elemen <tr />. (Ini adalah solusi yang baru saya gunakan hari ini, dan tampaknya berfungsi di IE6 dan FireFox 3, meskipun saya tidak mengujinya lebih lanjut.)

Juga, jika Anda enggan memodifikasi kode server Anda untuk meletakkan <div /> di dalam <td /> s, Anda dapat menggunakan jQuery (atau yang serupa) untuk secara dinamis membungkus konten <td /> dalam <div /> >, memungkinkan Anda untuk menerapkan CSS seperti yang diinginkan.

Atau cukup tambahkan kosong dengan ketinggian margin di antara baris yang ingin Anda tambahkan spasi

Inilah solusi sederhana dan elegan, dengan beberapa peringatan:

• Anda tidak dapat benar-benar membuat celah transparan, Anda harus memberi mereka warna tertentu.
• Anda tidak dapat membulatkan sudut batas di atas & di bawah celah
• Anda perlu mengetahui lapisan dan batas sel tabel Anda

Dengan mengingat hal itu, coba ini:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

Apa yang sebenarnya Anda lakukan adalah menempelkan persegi panjang ::before blok bagian atas semua sel di baris yang Anda inginkan diawali dengan celah. Blok ini sedikit keluar dari sel untuk tumpang tindih dengan batas yang ada, menyembunyikannya. Blok-blok ini hanyalah batas atas dan bawah yang diapit bersama: Batas atas membentuk celah, dan batas bawah menciptakan kembali tampilan batas atas asli sel.

Perhatikan bahwa jika Anda memiliki batas di sekeliling tabel itu sendiri dan juga sel, Anda harus lebih meningkatkan margin horizontal -ve dari 'blok' Anda. Jadi untuk batas tabel 4px, Anda sebaiknya menggunakan:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

Dan jika tabel Anda menggunakan border-collapse:separatebukan border-collapse:collapse, maka Anda harus (a) menggunakan lebar perbatasan tabel penuh:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... dan juga (b) ganti double-lebar perbatasan yang sekarang perlu muncul di bawah celah:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

Teknik ini mudah disesuaikan dengan versi .gapafter, jika Anda suka, atau untuk membuat celah vertikal (kolom) alih-alih celah baris.

Berikut adalah codepen tempat Anda dapat melihatnya dalam aksi: https://codepen.io/anon/pen/agqPpW

Ini berfungsi dengan baik:

#myOwnTable td { padding: 6px 0 6px 0;}

Saya kira Anda bisa bekerja di tata letak yang lebih halus dengan menentukan td yang jika perlu.

melakukan ini ditunjukkan di atas ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

menghapus penyelarasan kolom vertikal jadi berhati-hatilah bagaimana Anda menggunakannya

Sudahkah Anda mencoba:

tr.classname { margin-bottom:5em; }

Atau, masing-masing td dapat disesuaikan juga:

td.classname { margin-bottom:5em; }

atau

 td.classname { padding-bottom:5em; }