CSS: bagaimana cara membuat celah antar baris dalam tabel?

Artinya membuat tabel resultan terlihat kurang seperti ini:

[=== BARIS ===]
[=== BARIS ===]
[=== BARIS ===]
[=== BARIS ===]

... dan lainnya seperti ini:

[=== BARIS ===]

[=== BARIS ===]

[=== BARIS ===]

[=== BARIS ===]

Saya mencoba menambahkan

margin-bottom:1em;

ke td dan tr tetapi tidak mendapat apa-apa. Ada ide?

Semua yang Anda butuhkan:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

Itu mengasumsikan Anda menginginkan celah vertikal 1em, dan tidak ada celah horizontal. Jika Anda melakukan ini, Anda mungkin juga harus melihat cara mengontrol ketinggian garis Anda.

Agak aneh bahwa beberapa jawaban yang diberikan orang melibatkan runtuhnya batas: runtuh, yang efeknya berlawanan dengan pertanyaan yang diajukan.

table {
    border-collapse: collapse;
}

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

Sel tidak akan bereaksi terhadap apa pun kecuali Anda menyetel batas-runtuh terlebih dahulu. Anda juga dapat menambahkan batas ke elemen TR setelah itu disetel (antara lain.)

Jika ini untuk tata letak, saya akan beralih ke penggunaan DIV dan teknik tata letak yang lebih mutakhir, tetapi jika ini adalah data tabular, ketuk diri Anda sendiri. Saya masih sering menggunakan tabel di aplikasi web saya untuk data.

Jika tidak ada jawaban lain yang memuaskan, Anda selalu dapat membuat baris kosong dan menatanya dengan CSS secara tepat agar transparan.

Jika Anda tidak memiliki batas, atau memiliki batas dan menginginkan penspasian di dalam sel, Anda dapat menggunakan padding, atau line-height. Sejauh yang saya tahu, margin tidak berpengaruh pada sel dan baris.
Properti CSS untuk penspasian sel adalah border-spacing, tetapi tidak berfungsi di IE6 / 7 (jadi Anda dapat menggunakannya tergantung pada kerumunan Anda).

Jika semuanya gagal, Anda dapat menggunakan cellspacingatribut lama di markup Anda - tetapi ini juga akan memberi Anda jarak antar kolom. Beberapa penyetelan ulang CSS menyarankan Anda tetap harus menyetelnya untuk mendapatkan dukungan lintas browser:

/ * tabel masih perlu cellspacing="0"di markup * /

Inilah caranya (saya pikir itu tidak mungkin):

Pertama berikan tabel hanya spasi batas vertikal (misalnya 5px) dan setel spasi batas horizontal ke 0. Kemudian Anda harus memberikan batas yang tepat untuk setiap sel baris. Misalnya sel paling kanan di setiap baris harus memiliki batas di atas, bawah dan kanan. Sel paling kiri harus memiliki batas di atas, bawah, dan kiri. Dan sel lain di antara 2 ini seharusnya hanya memiliki batas di atas dan bawah. Seperti contoh ini:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

Menurut saya, cara termudah untuk dilakukan adalah menambahkan padding ke tag Anda.

td {
 padding: 10px 0
}

Semoga ini bisa membantu Anda! Bersorak!

Cukup Anda dapat menggunakan padding-topdan padding-bottompada tdelemen.

Unit bisa apa saja dari daftar ini:

Kode Demo:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

padding di TD berfungsi jika Anda ingin ruang memiliki warna latar belakang yang sama dengan td

dalam kasus saya, persyaratannya adalah untuk spasi antara baris header dan apa pun yang ada di atasnya

dengan menerapkan gaya ini ke satu sel, saya bisa mendapatkan pemisahan yang diinginkan. Tidak perlu menambahkannya ke semua sel ... Bisa dibilang bukan yang PALING elegan, tapi mungkin lebih elegan daripada baris pemisah.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

Jika Anda tetap menggunakan desain menggunakan tabel, ide terbaiknya adalah memberikan baris kosong tanpa konten dan ketinggian yang ditentukan di antara setiap baris dalam tabel.

Anda dapat menggunakan div untuk menghindari kerumitan ini. Beri margin untuk setiap div.

Anda juga bisa mengubah tinggi untuk setiap baris menggunakan CSS.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

Anda juga dapat mengubah ketinggian <td>elemen, itu akan memberi Anda hasil yang sama.

Buat yang lain <tr>tepat di bawah dan tambahkan beberapa ruang atau ketinggian ke konten<td>

Lihat biola misalnya

https://jsfiddle.net/jd_dev777/wx63norf/9/

Tambahkan aturan berikut ke tr dan seharusnya berhasil

float: left

Contoh (Buka di IE9 offcourse :)): http://jsfiddle.net/zshmN/

EDIT: Ini bukan solusi yang sah atau benar seperti yang ditunjukkan oleh banyak orang, tetapi jika Anda tidak memiliki pilihan dan membutuhkan sesuatu, ini akan berfungsi di IE9.

Jadi semua yang memberikan suara, tolong beri tahu kami solusi yang benar juga