Pertanyaan Margin Sel CSS


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


74
2018-04-04 03:28


asal


Jawaban:


Terapkan ini untuk yang pertama <td>:

padding-right:10px;

Contoh HTML:

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

73
2018-04-04 03:32



Sebuah kata peringatan: sekalipun padding-right mungkin memecahkan masalah (visual) khusus Anda, itu bukan cara yang tepat untuk menambahkan jarak antara sel tabel. Apa padding-right tidak untuk sel mirip dengan apa yang dilakukannya untuk sebagian besar elemen lain: itu menambah ruang dalam sel. Jika sel-sel tidak memiliki perbatasan atau warna latar belakang atau sesuatu yang lain yang membuat game menjauh, ini dapat meniru efek pengaturan ruang di antara sel, tetapi tidak sebaliknya.

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

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

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

Apa yang "benar" kalau begitu? Jika Anda mencari untuk mengganti cellspacing atribut dari tabel, lalu border-spacing (dengan border-collapse dinonaktifkan) adalah pengganti. 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 padding seperti di atas, hindari penataan sel (warna latar belakang, perbatasan, dll.) dan sebagai gantinya gunakan DIV kontainer di dalam sel untuk menerapkan gaya tersebut.

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

Tepuk tangan!


138
2018-06-07 02:35



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

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

19
2018-02-19 14:11



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

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

Dan ini akan menjadi HTML Anda, sans CSS !:

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

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


14
2017-07-23 14:47



margin tidak bekerja sayangnya pada sel-sel individual, namun Anda dapat menambahkan kolom tambahan antara dua sel yang ingin Anda letakkan spasi di antara ... opsi lain adalah menggunakan perbatasan dengan warna yang sama dengan latar ...


13
2018-04-07 13:33



Anda cukup melakukan itu:

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

CSS tidak diperlukan :) 10px ini adalah ruang Anda.


8
2018-04-05 21:21



Mencoba padding-right. Anda tidak diizinkan untuk menempatkan marginantara sel-sel.

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

7
2018-04-04 03:32



Menggunakan border-collapse: terpisah; tidak bekerja untuk saya, karena saya hanya membutuhkan margin di antara sel-sel tabel tidak di sisi meja.

Saya menemukan solusi selanjutnya:

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

4
2017-10-28 22:58



Solusi ini berfungsi tdyang membutuhkan keduanya border dan padding untuk styling.
 (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-block dan satu set width

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>


4
2018-02-04 11:19



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


2
2018-04-04 03:32



Jika Anda memiliki kontrol terhadap lebar tabel, masukkan padding-left pada semua sel tabel dan masukkan margin-kiri negatif di seluruh tabel.

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

table td {
    padding-left: 20px;
}

Perhatikan, lebar tabel perlu menyertakan lebar padding / margin. Dengan menggunakan contoh di atas, lebar visual tabel akan menjadi 700 piksel.

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


2
2018-03-05 22:41