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?
Jawaban:
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.
sumber
thead, tbody {position: relative; top: -{border-spacing-value} }
.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.
sumber
Jika tidak ada jawaban lain yang memuaskan, Anda selalu dapat membuat baris kosong dan menatanya dengan CSS secara tepat agar transparan.
sumber
Jika Anda tidak memiliki batas, atau memiliki batas dan menginginkan penspasian di dalam sel, Anda dapat menggunakan
padding
, atauline-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
cellspacing
atribut 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:sumber
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>
sumber
Menurut saya, cara termudah untuk dilakukan adalah menambahkan padding ke tag Anda.
td { padding: 10px 0 }
Semoga ini bisa membantu Anda! Bersorak!
sumber
Cukup Anda dapat menggunakan
padding-top
danpadding-bottom
padatd
elemen.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>
sumber
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>
sumber
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.
sumber
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.sumber
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/
sumber
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
sumber