CSS Hücre Kenar Boşluğu

Question 1

HTML belgemde iki sütunlu ve çok satırlı bir tablom var. Birinci ve ikinci sütun arasındaki boşluğu css ile nasıl artırabilirim? "Margin-right: 10px;" sol taraftaki hücrelerin her birine, ancak etkisiz.

Question 2

Bunu ilk uygulamanıza uygulayın <td>:

padding-right:10px;

HTML örneği:

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

Question 3

Bir uyarı kelimesi: padding-rightbelirli (görsel) probleminizi çözebilir, ancak tablo hücreleri arasında boşluk eklemenin doğru yolu değildir . Ne padding-rightbir hücre için yaptığı en diğer elemanlar için ne yaptığını benzer: o boşluk ekler içinde hücrede. Hücrelerde bir kenarlık veya arka plan rengi yoksa ya da oyunu başka bir şeye verirse, bu, hücreler arasındaki boşluğu ayarlamanın etkisini taklit edebilir, ancak başka türlü olamaz.

Birisinin belirttiği gibi, tablo hücreleri için kenar boşluğu özellikleri göz ardı edilir:

CSS 2.1 Spesifikasyonu - Tablolar - Tablo içeriklerinin görsel düzeni

İç tablo öğeleri, içerik ve kenarlıklara sahip dikdörtgen kutular oluşturur. Hücrelerin dolgusu da vardır. İç tablo öğelerinin kenar boşlukları yoktur.

O halde "doğru" yol nedir? cellspacingTablonun özniteliğini değiştirmek istiyorsanız, border-spacing( border-collapsedevre dışı bırakılmış olarak) bir yedektir. Bununla birlikte, hücre başına "marjlar" gerekliyse, CSS kullanılarak bunun nasıl doğru bir şekilde gerçekleştirilebileceğinden emin değilim. Aklıma gelen tek hile padding, yukarıdaki gibi kullanmak , hücrelerin herhangi bir stilinden kaçınmak (arka plan renkleri, kenarlıklar, vb.) Ve bunun yerine, bu tür stilleri uygulamak için hücrelerin içindeki kapsayıcı DIV'leri kullanmaktır.

Ben bir CSS uzmanı değilim, bu yüzden yukarıda yanlış olabilirim (bunu bilmek harika olurdu! Ben de bir tablo hücre marjı CSS çözümü istiyorum).

Şerefe!

Question 4

Dolgu kullanamıyorsanız (örneğin, td'de sınırlarınız varsa) bunu deneyin

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

Question 5

Bunun oldukça gecikmiş olduğunun farkındayım, ancak kayıt için bunu yapmak için CSS seçicilerini de kullanabilirsiniz (satır içi stillere olan ihtiyacı ortadan kaldırır.) Bu CSS, her satırın ilk sütununa dolgu uygular:

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

Ve bu sizin HTML'niz olacaktır, sans CSS !:

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

Bu, özellikle CSS ile çok sayıda özel biçimlendirme yapmanız gereken durumlarda çok daha zarif bir işaretlemeye olanak tanır.

Question 6

kenar boşluğu maalesef tek tek hücrelerde çalışmıyor, ancak arasına boşluk koymak istediğiniz iki hücre arasına fazladan sütunlar ekleyebilirsiniz ... Diğer bir seçenek de arka planla aynı renkte bir kenarlık kullanmaktır ...

Question 7

Bunu basitçe yapabilirsiniz:

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

CSS gerekmez :) Bu 10px sizin alanınızdır.

Question 8

Deneyin padding-right. marginHücreler arasına e-posta koymanıza izin verilmez .

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

Question 9

Border-collapse kullanma : ayrı; benim için işe yaramadı, çünkü sadece masanın yanlarında değil tablo hücrelerinin arasında bir boşluğa ihtiyacım var.

Bir sonraki çözümü buldum:

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

Question 10

Bu çözüm çalışması td'hem bu ihtiyacı s borderve paddingstil için.
(Chrome 32, IE 11, Firefox 25'te test edilmiştir)

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>

2016'da güncellendi

Firefox artık bunu inline-blockbir set olmadan destekliyorwidth

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>

Snippet'i genişlet

Question 11

Bu şekilde bir hücredeki tek tek sütunları ayıramazsınız. Kanımca, en iyi seçeneğiniz style='padding-left:10px'ikinci sütuna bir eklemek ve stilleri dahili bir div veya öğeye uygulamaktır. Bu şekilde daha büyük bir alan illüzyonuna ulaşabilirsiniz.

Question 12

Tablonun genişliğinin kontrolüne sahipseniz, tüm tablo hücrelerine bir sol dolgu ekleyin ve tüm tabloya negatif bir sol kenar boşluğu ekleyin.

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

table td {
    padding-left: 20px;
}

Tablonun genişliğinin dolgu / kenar boşluğu genişliğini içermesi gerektiğini unutmayın. Yukarıdakileri örnek olarak kullanırsak, tablonun görsel genişliği 700 piksel olacaktır.

Masa hücrelerinizde kenarlıklar kullanıyorsanız, bu en iyi çözüm değildir.

Question 13

ÇÖZÜM

Bu sorunu çözmenin en iyi yolunu deneme yanılma ve benden önce yazılanları okumanın bir birleşimi olarak buldum:

http://jsfiddle.net/MG4hD/

Gördüğünüz gibi, oldukça zor işlerim var ... ama bunun iyi görünmesini sağlamanın ana sebebi:

EBEVEYN ELEMENT (UL): sınır-daraltma: ayrı; sınır aralığı: .25em; kenar-sol: -.25em;
ÇOCUK ELEMANLARI (LI): ekran: masa hücresi; dikey hizalama: orta;

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

Question 14

Cian'ın bir kenar boşluğu yerine bir kenarlık belirleme çözümünü takiben, arka planla renk eşleşmesi yapmak zorunda kalmamak için kenarlık rengini saydam olarak ayarlayabileceğinizi keşfettim. FF17, IE9, Chrome v23'te çalışır. Gerçek bir sınıra da ihtiyacınız olmadığı sürece iyi bir çözüm gibi görünüyor.

Question 15

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

Snippet'i genişlet

Dolgu kullanmak bunu yapmanın doğru yolu değildir, görünüşü değiştirebilir ama istediğiniz şey bu değildir. Bu, sorununuzu çözebilir.

Question 16

İkisini de kullanabilirsiniz:

padding-right:10px;

padding-right:10%;

Ancak % ile kullanmak daha iyidir .

Question 17

Dolgu sizin için işe yaramıyorsa, başka bir çözüm de fazladan sütunlar eklemek ve kullanarak genişlik yoluyla bir kenar boşluğu ayarlamaktır <colgroup>. Hücre sınırının kendisine bir kenar boşluğu vermeye çalıştığım için yukarıdaki dolgu çözümlerinden hiçbiri benim için çalışmıyordu ve sonunda sorunu çözen şey buydu:

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

Tablo hücrelerinin kenarlıklarının stilini şu şekilde kullanın: nth-child, böylece 2. ve üçüncü sütunlar tek sütun olarak görünür.

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