Bagaimana menempatkan jarak antar elemen TBODY

95

Saya punya meja seperti ini:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Saya ingin memberi jarak antara setiap elemen tubuh, tetapi padding dan margin tidak berpengaruh. Ada ide?

html css nickf
sumber
Apakah benar untuk mengulang tanda 'tbody'? Apa yang selalu saya lihat adalah semua "<tr> .. </tr>" berada di dalam satu tag "tbody '.
Saneef
23
Ya ini sah. Spesifikasi mengatakan: <! ELEMEN TABLE - - (CAPTION ?, (COL * | COLGROUP *), THEAD ?, TFOOT ?, TBODY +)> artinya harus ada satu atau lebih tubuh. w3.org/TR/html4/struct/tables.html#h-11.2.1
nickf

Jawaban:

56

Coba ini, jika Anda tidak keberatan tidak memiliki perbatasan.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>
Dave Jensen
sumber
7
Coba border-top: 15px solid transparent;
Steve Almond
3
Ingin menekankan ini. Gunakan transparentsebagai warna perbatasan. Apa yang dikatakan @SteveAlmond.
iheartcsharp
jika tabel / tbody / tr / td memiliki warna latar belakang, pengaturan warna tepi transparentakan memberikan warna latar belakang elemen, yang pada dasarnya tidak dapat dibedakan dari badan elemen. Anda perlu mewarnai perbatasan secara eksplisit dengan warna yang Anda inginkan (agar tidak terlihat)
Guy Passy
81

Sesuatu seperti ini akan berfungsi, tergantung pada persyaratan dukungan browser Anda:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}
MacNimble
sumber
1
Ini adalah satu-satunya solusi yang berfungsi saat sel Anda memiliki latar belakang yang seharusnya tidak dimiliki ruang.
Laradda
Ini bekerja dengan baik untuk saya. Apakah ada kekurangannya? Juga, mengapa dua titik dua?
nh2
Solusi bagus. Menjaga semuanya tetap dapat diakses!
Jason T Featheringham
1
@ nh2: titik dua ganda untuk konten semu dan titik dua untuk selektor semu. Ini adalah pembaruan untuk sintaks CSS. Semuanya dulu hanya menggunakan titik dua tunggal. Browser lama tidak mendukung titik dua ganda (seperti, IE <= 8).
dbmikus
3
Bukankah lebih aman digunakan display: table-row;?
rachel
20

Orang akan selalu memiliki opini kontroversial tentang penggunaan elemen tabel kosong untuk mengatur tata letak halaman (sebagaimana dibuktikan dengan suara negatif jawaban ini). Saya mengenali ini, tetapi terkadang lebih mudah menggunakannya dengan cara ini saat Anda bekerja dengan cara yang " cepat dan kotor ".

Saya telah menggunakan baris kosong di proyek sebelumnya ke grup spasi dari baris tabel. Saya menetapkan baris spacer kelas css mereka sendiri dan menentukan ketinggian untuk kelas itu yang bertindak sebagai margin atas dan bawah untuk grup baris tabel itu. 

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

Jika Anda tidak memiliki batas pada sel tabel Anda , Anda juga dapat menentukan ketinggian ke sel atau baris khas Anda dalam lembar gaya yang memberi spasi merata di semua baris tabel Anda.

tr{
   height: 40px;
}
kevtrout
sumber
Nah jika Anda akan menambahkan markup ekstra, mengapa tidak meletakkan kelas di baris pertama setiap tbody?
nickf
Yah, itu bisa jadi karena baris-baris tersebut menghasilkan kode, dan menambahkan baris terpisah di markup mungkin lebih bisa dipertahankan daripada membuat kasus khusus untuk baris pertama dari konten yang dihasilkan.
Rolf Rander
12
Turunkan semua yang Anda inginkan, tetapi ini adalah satu-satunya solusi tanpa kekurangan - dan bahkan jika itu melanggar pemisahan, baris kosong bukanlah masalah besar IMO.
Xkeeper
11
Tanpa kekurangan, pantatku! Coba gunakan pembaca layar untuk ini dan perhatikan jumlah baris yang salah. Lebih baik lagi, coba salin dan tempel tabel ke dalam spreadsheet. Anda akan memformat ulang selama berjam-jam jika Anda memiliki banyak konten. Tabel dimaksudkan untuk menampilkan data (dan sangat mudah diakses), bukan presentasi acak antar bagian.
Jason T Featheringham
Itu hanya visual. Perlu diingat bahwa html juga merupakan dokumen yang dapat diproses, oleh karena itu konten di dalamnya harus diformat dengan baik. Seperti disebutkan di atas, tabel salin-tempel atau penggunaan pembaca layar akan gagal. Desain seperti itu tidak boleh didorong. :: solusi konten lebih baik karena tidak mengacaukan markup.
pawel-kuznik
12

Saya telah mengalami masalah dalam mengatur jarak beberapa <tbody>dengan ::beforesemu, karena <tr>mengandung <td>dengan rowpan di beberapa browser.

Pada dasarnya, jika Anda memiliki <tbody>struktur seperti ini:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

Dan Anda mengikuti siapa yang menyarankan untuk menulis css pada ::beforeelemen semu seperti ini:

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

Ini akan mempengaruhi rowpan, membuat tabel "kehilangan" dalam hitungan detik <tr>berapa banyak <td>-rowspan yang ada di baris pertama.

Jadi, jika ada yang menemui masalah seperti itu, solusinya adalah gaya ::before semu dengan cara ini:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

Ini biola

Nineoclick
sumber
6

Berikut kemungkinan lain yang bergantung pada: first-child yang tidak tersedia di semua browser:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>
Dave Jensen
sumber
3
Yang ini tidak akan berfungsi dengan baik jika Anda memiliki sesuatu yang kebetulan bergantung pada posisi konten relatif terhadap ukuran sel, seperti box-shadow, gambar latar belakang, atau apa saja.
Xkeeper
1
Hanya untuk memperjelas bagi orang lain yang menemukan jawaban ini di google, saya kira karena ini ditulis pada tahun 2008, jawaban ini sekarang (2015) memiliki dukungan penuh di semua browser utama? Setidaknya memeriksa anak pertama caniuse.com tampaknya didukung dengan baik?
redfox05
6

Cukup atur displaysebagai blockdan itu akan berhasil.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}
pengguna007
sumber
1
jawaban ini harus menjadi jawaban yang diterima karena merupakan satu-satunya yang memungkinkan untuk menggunakan tbody berbatas dengan kolom "tanpa batas".
robsonrosa
13
display:blockmerusak kesejajaran kolom antara elemen tubuh. Anda tidak lagi mendapatkan keuntungan dari mesin tata letak tabel
M Conrad
4

Dari semua jawaban yang diberikan di atas, hanya jawaban djenson47 yang mempertahankan pemisahan antara penyajian dan konten . Kelemahan dari metode model batas yang diciutkan adalah Anda tidak dapat lagi menggunakan atribut batas tabel atau spasi sel untuk memisahkan sel individu. Anda dapat berargumen bahwa ini adalah hal yang baik, dan ada beberapa solusi, tetapi bisa menyebalkan. Jadi menurut saya metode anak pertama adalah yang paling elegan.

Alternatifnya, Anda juga dapat menyetel properti overflow kelas TBODY Anda ke selain "terlihat". Metode ini memungkinkan Anda mempertahankan model perbatasan yang terpisah juga:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>
Calvin
sumber
Saya ingin melakukan sesuatu yang serupa, ini sempurna untuk saya
Eruant
4

Karena padding dapat diterapkan ke TD, Anda dapat melakukan trik dengan tanda +. Maka dimungkinkan untuk memberikan bantalan atas ke TD dari TR pertama dari sebuah tbody:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

Saya telah menambahkan "tbody + tbody" sehingga tbody pertama tidak akan memiliki bantalan atas. Namun, itu tidak wajib.

Sejauh yang saya tahu tidak ada kekurangan :), meskipun tidak menguji browser lama.

Maarten
sumber
2

Anda dapat menggunakan border-spacingtabel dengan grup baris tabel untuk menambahkan spasi di antara grup tersebut. Padahal, menurut saya tidak ada cara untuk menentukan grup mana yang diberi spasi dan mana yang tidak.

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}
OdraEncoded
sumber
0

JAWABAN BARU

Anda dapat menggunakan <tbody>tag sebanyak yang Anda suka. Saya tidak menyadari bahwa W3C tidak masalah sampai sekarang. Bukan untuk mengatakan solusi saya di bawah ini tidak berfungsi (itu berhasil), tetapi untuk melakukan apa yang Anda coba lakukan, tetapkan <tbody>kelas tag Anda dan kemudian referensi <td>tag individual mereka melalui CSS seperti:

table tbody.yourClass td {
    padding: 10px;
}

dan HTML Anda sebagai berikut:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Coba orang itu :)

JAWABAN LAMA

apapun yang Anda lakukan, JANGAN masukkan baris kosong ...

Anda tidak boleh memiliki lebih dari 1 elemen tubuh di tabel Anda. yang dapat Anda lakukan adalah menyetel atribut class atau id di <tr>elemen Anda dan memberikan <td>padding tag yang sesuai :

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Anda bahkan dapat menetapkan kelas tambahan atas dan bawah <tr>sehingga mereka hanya melakukan bantalan atas atau bawah, masing-masing:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

dan di HTML Anda, <tr>tag Anda akan terlihat seperti ini:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Semoga ini membantu!

Jason
sumber
0

jawaban djensen47 berfungsi baik untuk browser yang lebih baru, namun, seperti yang ditunjukkan, IE7 tidak berfungsi.

Solusi saya untuk masalah ini untuk mendukung browser lama adalah dengan membungkus setiap konten sel di dalam div. Kemudian tambahkan margin-top ke div.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

Pengaturan tinggi menjaga sel setidaknya 30px tinggi untuk mencegah pewarnaan sel yang digunakan di dalam div dari runtuh di sekitar teks. Margin atas menciptakan ruang yang diinginkan dengan membuat seluruh baris lebih tinggi.

Jereme Guenther
sumber
0

Menemukan ini sambil mencoba menyelesaikannya sendiri. Saya sukses dengan meletakkan <br>tag tepat sebelum </tbody>tag penutup . Ini murni perbaikan visual, tetapi tampaknya berfungsi di sebagian besar browser yang saya uji.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Harus dapat diakses juga.

Ian
sumber