Margin Sel CSS

96

Dalam dokumen HTML saya, saya memiliki tabel dengan dua kolom dan beberapa baris. Bagaimana cara menambah spasi di antara kolom pertama dan kedua dengan css? Saya sudah mencoba menerapkan "margin-right: 10px;" ke setiap sel di sisi kiri, tetapi tidak berpengaruh.

html css cell margin css-tables Tom
sumber
Ada solusi CSS yang bagus di sini, yang baru diperbarui: stackoverflow.com/a/21551008/2827823
Mulai

Jawaban:

91

Terapkan ini ke yang pertama Anda <td>:

padding-right:10px;

Contoh HTML:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>
roman m
sumber
12
Pendekatan yang jauh lebih baik untuk itu adalah dengan menggunakan runtuhnya perbatasan: terpisah
Ramanan Gaurav
21
Untuk berjaga-jaga jika seseorang menyalin / menempelkan teknik runtuh batas komentar di atas, itu seharusnya border-collapse: separate(ada kesalahan ketik dalam ejaan di separateatas)
Tony DiNitto
1
Selain itu, jika Anda ingin menentukan jumlah ruang antar perbatasan, Anda harus menggunakanborder-spacing: 5px;
Sølve Tornøe
border-spacingjuga menambahkan spasi antar baris. Sayangnya, tidak ada properti terpisah untuk jarak vertikal dan horizontal.
Lee Blake
border-spacingmengambil dua argumen - satu untuk horizontal dan satu untuk vertikal.
OldTinfoil
152

Sebuah kata peringatan: meskipun padding-rightmungkin menyelesaikan masalah khusus (visual) Anda, ini bukanlah cara yang tepat untuk menambahkan spasi antar sel tabel. Apa yang padding-rightdilakukannya untuk sel mirip dengan apa yang dilakukannya untuk sebagian besar elemen lainnya: ia menambahkan ruang di dalam sel. Jika sel tidak memiliki batas atau warna latar belakang atau hal lain yang memberikan permainan itu, ini bisa meniru efek pengaturan ruang antara sel, tetapi tidak sebaliknya.

Seperti yang dicatat seseorang, spesifikasi margin diabaikan untuk sel tabel:

Spesifikasi CSS 2.1 - Tabel - Tata letak visual dari isi tabel

Elemen tabel internal menghasilkan kotak persegi panjang dengan konten dan batas. Sel juga memiliki bantalan. Elemen tabel internal tidak memiliki margin.

Lalu apa cara yang "benar"? Jika Anda ingin mengganti cellspacingatribut tabel, maka border-spacing(dengan border-collapsenonaktif) adalah penggantinya. Namun, jika "margin" per sel diperlukan, saya tidak yakin bagaimana hal itu dapat dicapai dengan benar menggunakan CSS. Satu-satunya peretasan yang dapat saya pikirkan adalah menggunakan paddingseperti di atas, hindari gaya apa pun dari sel (warna latar belakang, batas, dll.) Dan sebagai gantinya gunakan wadah DIV di dalam sel untuk menerapkan gaya seperti itu.

Saya bukan ahli CSS, jadi saya bisa saja salah di atas (yang akan sangat bagus untuk diketahui! Saya juga ingin solusi CSS margin sel tabel).

Bersulang!

ravi
sumber
Ini bagus dan semuanya untuk padding, tapi bagaimana dengan margin? Saya ingin menambahkan spasi di luar sel yang memiliki batas. Margin CSS tampaknya tidak berpengaruh pada sel.
Levitikon
1
Levitikon, itu benar - margin tidak berfungsi karena alasan di atas. Satu-satunya cara untuk mendapatkan apa yang Anda inginkan, AFAIK, adalah membungkus konten sel dalam DIV, menambahkan margin dan batas ke DIV tersebut, bukan sel.
ravi
Saya memposting solusi CSS sejak lama (memperbaruinya hari ini): stackoverflow.com/a/21551008/2827823
Ason
28

Jika Anda tidak dapat menggunakan padding (misalnya Anda memiliki batas di td) coba ini

table { 
           border-collapse: separate;
           border-spacing: 2px;
}
nika206
sumber
3
Anda dapat memeriksa lebih lanjut tentang runtuhnya perbatasan: pisahkan di sini css-tricks.com/almanac/properties/b/border-collapse
Gaurav Ramanan
14

Saya menyadari ini cukup terlambat, tetapi sebagai catatan, Anda juga dapat menggunakan pemilih CSS untuk melakukan ini (menghilangkan kebutuhan akan gaya sebaris.) CSS ini menerapkan padding ke kolom pertama setiap baris:

table > tr > td:first-child { padding-right:10px }

Dan ini akan menjadi HTML Anda, tanpa CSS !:

<table><tr><td>data</td><td>more data</td></tr></table>

Ini memungkinkan markup yang jauh lebih elegan, terutama dalam kasus di mana Anda perlu melakukan banyak pemformatan khusus dengan CSS.


sumber
14

Sayangnya margin tidak berfungsi pada setiap sel, namun Anda dapat menambahkan kolom tambahan di antara dua sel yang ingin Anda beri spasi di antara ... opsi lain adalah menggunakan batas dengan warna yang sama dengan latar belakang ...

Cian
sumber
Sepertinya border memiliki masalah yang sama dengan padding - ia menambahkan spasi antara konten sel dan batas, bukan di luar batas.
stewbasic
11

Anda cukup melakukan itu:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

Tidak diperlukan CSS :) Ini 10px adalah ruang Anda.

MrTrebor
sumber
ini bagus, sederhana, dan efektif, terima kasih telah mengingatkan saya +1
Hayden Thring
8
Ini bukan pendekatan yang baik untuk pemisahan struktur dan gaya. Ini bukan kasus apakah CSS diperlukan atau tidak - CSS harus digunakan untuk hal seperti ini.
Simon Robb
tidak boleh <td style = "width: 10px;"> </td>
Rune Jeppesen
1
Ingat, solusi paling sederhana adalah yang terbaik. Metode dengan gaya sebaris juga bagus :)
MrTrebor
Ini bekerja untuk kasus khusus saya. Sangat kreatif. Terima kasih
Phan Van Linh
7

Coba padding-right. Anda tidak diizinkan untuk meletakkan margindi antara sel.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
mpen
sumber
4

Menggunakan border-collapse: pisahkan; tidak berhasil untuk saya, karena saya hanya membutuhkan margin di antara sel tabel bukan di sisi tabel.

Saya datang dengan solusi berikutnya:

- CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>
Robin
sumber
4

Solusi ini bekerja untuk mereka tdyang membutuhkan borderdan paddinguntuk penataan.
(Diuji di Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Diperbarui 2016

Firefox sekarang mendukungnya tanpa inline-blockdan satu setwidth

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>
Luaskan cuplikan

Seorang anak
sumber
Ini juga bekerja untuk tabel css (display: table *) yang terbuat dari div.
Necreaux
2

Anda tidak dapat memilih kolom individual dalam sel dengan cara itu. Menurut pendapat saya, opsi terbaik Anda adalah menambahkan a style='padding-left:10px'di kolom kedua dan menerapkan gaya pada div atau elemen internal. Dengan cara ini Anda dapat mencapai ilusi ruang yang lebih besar.

jerebear
sumber
2

Jika Anda memiliki kontrol atas lebar tabel, sisipkan padding-kiri di semua sel tabel dan sisipkan margin-kiri negatif di seluruh tabel.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Perhatikan, lebar tabel perlu menyertakan padding / lebar margin. Menggunakan di atas sebagai contoh, lebar visual tabel akan menjadi 700px.

Ini bukan solusi terbaik jika Anda menggunakan batas pada sel tabel Anda.

Dallas Clark
sumber
2

LARUTAN

Saya menemukan cara terbaik untuk memecahkan masalah ini adalah kombinasi dari trial and error dan membaca apa yang tertulis di hadapan saya:

http://jsfiddle.net/MG4hD/


Seperti yang Anda lihat, saya memiliki beberapa hal yang cukup rumit yang sedang terjadi ... tetapi hal utama untuk membuat ini terlihat bagus adalah:

ELEMEN ORANG TUA (UL): border-collapse: pisahkan; spasi-batas: .25em; margin kiri: -.25em;
UNSUR ANAK (LI): display: table-cell; perataan vertikal: tengah;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }
Oneezy
sumber
1

Mengikuti solusi Cian untuk mengatur perbatasan di tempat margin, saya menemukan Anda dapat mengatur warna perbatasan menjadi transparan untuk menghindari warna yang cocok dengan latar belakang. Bekerja di FF17, IE9, Chrome v23. Sepertinya solusi yang layak asalkan Anda juga tidak membutuhkan perbatasan yang sebenarnya.

Vitaly Chernobyl
sumber
1 

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>
Luaskan cuplikan

Menggunakan padding bukanlah cara yang benar untuk melakukannya, ini dapat mengubah tampilan tetapi bukan itu yang Anda inginkan. Ini dapat menyelesaikan masalah Anda.

Sengottaian Karthik
sumber
Solusi ini sudah diposting, tidak perlu 2 jawaban yang mengatakan hal yang sama.
Ason
1

Anda dapat menggunakan keduanya:

padding-right:10px;

padding-right:10%;

Tapi lebih baik digunakan dengan % .

Muhammad Awais
sumber
1
Saya memberi suara positif, tetapi Anda mungkin telah menjelaskan mengapa lebih baik menggunakan%
Mawg mengatakan kembalikan Monica
1
Biasanya% digunakan untuk membuat responsif.
Muhammad Awais
1
Plus satu - mungkin Anda bisa mengedit jawaban Anda untuk mengatakannya? Tidak semua orang yang membaca dapat membaca komentar .. Jika Anda ingin menambahkan tautan ke sesuatu tentang desain responsif, lebih baik lagi :-)
Mawg mengatakan mengembalikan Monica
1

Jika padding tidak berfungsi untuk Anda, solusi lain adalah menambahkan kolom ekstra dan mengatur margin melalui lebar menggunakan <colgroup>. Tidak ada solusi padding di atas yang berfungsi untuk saya karena saya mencoba memberi batas sel itu sendiri margin, dan inilah yang pada akhirnya menyelesaikan masalah:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Atur gaya batas sel tabel menggunakan: nth-child sehingga kolom ke-2 dan ketiga tampak seperti satu kolom.

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }
Ezra
sumber
Itu menutupi masalah, bukan menjawabnya. Tidak ada yang akan belajar bagaimana melakukannya dengan benar dengan melakukan itu
Mawg mengatakan kembalikan Monica