CSS Margin Cell

Sebuah kata peringatan: meskipun padding-right mungkin memecahkan tertentu (visual) masalah, itu bukan cara yang tepat untuk menambahkan spasi antara sel tabel. Apa yang padding-right tidak untuk sel ini mirip dengan apa yang dilakukannya untuk sebagian besar unsur-unsur lain: menambah ruang hanya sel. Jika sel-sel tidak memiliki perbatasan atau warna latar belakang atau sesuatu yang lain yang memberikan permainan pergi, ini dapat meniru efek dari pengaturan ruang antara sel-sel, tetapi tidak sebaliknya.

Sebagai seseorang mencatat, margin spesifikasi diabaikan untuk sel tabel:

CSS 2.1 Spesifikasi – Tabel – Visual yang tata letak dari isi tabel

Internal tabel unsur-unsur yang menghasilkan kotak persegi panjang dengan konten dan perbatasan. Sel-sel memiliki padding juga. Internal tabel unsur-unsur yang tidak memiliki margin.

Apa's "benar" dengan cara itu? Jika anda mencari untuk menggantikan cellspacing atribut dari tabel, maka border-spacing (dengan border-collapse cacat) adalah pengganti. Namun, jika per-cell "margin" yang diperlukan, saya tidak yakin bagaimana hal itu dapat dengan benar dicapai dengan menggunakan CSS. Satu-satunya hack yang bisa saya pikirkan adalah untuk menggunakan padding seperti di atas, hindari styling dari sel-sel (warna latar belakang, perbatasan, dll.) dan sebagai gantinya menggunakan wadah Div di dalam sel-sel untuk melaksanakan styling seperti.

Saya bukan CSS ahli, jadi saya juga bisa salah di atas (yang akan menjadi besar untuk tahu! Saya juga akan seperti sel tabel margin CSS solusi).

Cheers!

Menerapkan ini untuk pertama anda <td>:

padding-right:10px;

HTML contoh:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

Jika anda dapat't menggunakan padding (misalnya anda memiliki perbatasan di td) mencoba ini

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

margin tidak bekerja pada sel-sel individual, namun anda bisa menambahkan kolom tambahan antara dua sel yang anda ingin menempatkan ruang antara... pilihan lain adalah dengan menggunakan border dengan warna yang sama sebagai latar belakang...

Saya menyadari hal ini cukup terlambat, tapi untuk catatan, anda juga dapat menggunakan CSS untuk melakukan hal ini (menghilangkan kebutuhan untuk gaya inline.) CSS ini berlaku padding untuk kolom pertama dari setiap baris:

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

Dan ini akan dapat anda HTML, sans CSS!:

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

Hal ini memungkinkan untuk jauh lebih elegan markup, terutama dalam kasus di mana anda perlu untuk melakukan banyak format tertentu dengan CSS.

Anda hanya dapat melakukan itu:

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

Tidak ada CSS yang diperlukan :) Ini 10px adalah ruang anda.

Mencoba padding-right. Anda're tidak diperbolehkan untuk menempatkan margin's antara sel-sel.

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

Menggunakan border-collapse: separate; tidak't bekerja untuk saya, karena saya hanya perlu margin di antara sel-sel tabel tidak di sisi meja.

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>

Solusi ini bekerja untuk td's yang perlu kedua perbatasan dan bantalan untuk styling. (Diuji pada 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 mendukung itu tanpa inline-block dan set lebar

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>

Jika anda memiliki kontrol dari lebar tabel, menyisipkan padding-left pada semua sel tabel dan menyisipkan negatif margin-left pada seluruh tabel.

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

table td {
    padding-left: 20px;
}

Catatan, lebar tabel harus mencakup padding/margin yang lebar. Menggunakan di atas sebagai contoh, visual lebar tabel akan 700px.

Ini bukan solusi terbaik jika anda're menggunakan batas pada sel tabel.

Anda dapat't satu kolom individu dalam sel dengan cara itu. Dalam pendapat saya, pilihan terbaik anda adalah dengan menambahkan style='padding-left:10px' pada kolom kedua dan menerapkan gaya pada internal div atau elemen. Dengan cara ini anda dapat mencapai ilusi ruang yang lebih besar.

SOLUSI

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

http://jsfiddle.net/MG4hD/

Seperti yang anda lihat saya punya beberapa cukup rumit hal-hal yang terjadi... tapi yang utama kicker mendapatkan ini untuk mencari yang baik adalah:

ELEMEN INDUK (UL): border-collapse: separate; border-spacing: .25em; margin-left: -.25em;
ELEMEN ANAK (LI): display: table-cell; vertical-align: middle;

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; }

Berikut Cian's solusi pengaturan perbatasan di tempat margin, saya menemukan anda dapat mengatur warna perbatasan untuk transparan untuk menghindari harus mencocokkan warna latar belakang. Bekerja di FF17, IE9, Chrome v23. Tampaknya seperti solusi yang layak disediakan anda don't juga perlu yang sebenarnya perbatasan.

table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}




<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>

Menggunakan padding bukan cara yang benar untuk melakukan hal itu, mungkin mengubah tampilan tapi itu bukan apa yang anda inginkan. Hal ini dapat memecahkan masalah anda.

Anda dapat menggunakan keduanya:

padding-right:10px;

padding-right:10%;

Tapi itu's baik untuk digunakan dengan %.

Jika padding isn't bekerja untuk anda, yang lain bekerja di sekitar ini untuk menambahkan kolom tambahan dan mengatur margin via lebar menggunakan <colgroup>. Tidak ada padding solusi di atas bekerja untuk saya karena saya sedang mencoba untuk memberikan border sel itu sendiri margin, dan ini adalah apa yang memecahkan masalah di akhir:

<table>





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

Gaya perbatasan sel tabel menggunakan :nth-child jadi yang ke-2 dan kolom ketiga muncul untuk menjadi 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; }