CSS'de hücre dolgusu ve hücre boşluğu ayarlama?

Bir HTML tablosunda, cellpaddingve cellspacingşu şekilde ayarlanabilir:

<table cellspacing="1" cellpadding="1">

Aynı şey CSS kullanılarak nasıl yapılabilir?

temeller

CSS'de " paddinghücre dolgusu" nu kontrol etmek için tablo hücrelerinde kullanabilirsiniz . Örneğin 10 piksel "hücre dolgusu" için:

td { 
    padding: 10px;
}

"Hücre aralığı" border-spacingiçin, tablonuza CSS özelliğini uygulayabilirsiniz . Örneğin, 10 piksel "hücre boşluğu" için:

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

Bu özellik, eski "hücre boşluğu" ile yapamadığınız ayrı bir yatay ve dikey aralığa bile izin verecektir.

IE'deki sorunlar <= 7

Bu, neredeyse şanssız olduğunuz Internet Explorer 7 üzerinden Internet Explorer dışında hemen hemen tüm popüler tarayıcılarda çalışır. "Neredeyse" diyorum çünkü bu tarayıcılar border-collapsebitişik tablo hücrelerinin sınırlarını birleştiren özelliği destekliyor . Hücre boşluğunu (yani cellspacing="0") ortadan kaldırmaya çalışıyorsanız border-collapse:collapse, aynı etkiye sahip olmalısınız: tablo hücreleri arasında boşluk yok. Ancak bu destek, cellspacingtablo öğesinde var olan bir HTML niteliğini geçersiz kılmadığından buggy'dir.

Kısacası: Internet Explorer olmayan 5-7 tarayıcılar için border-spacingsizi halleder. Internet Explorer için durumunuz doğruysa (0 hücre aralığı istiyorsanız ve tablonuzda henüz tanımlanmamışsa) kullanabilirsiniz border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Not: Tablolara uygulanabilen ve hangi tarayıcılara uygulanabilen CSS özelliklerine büyük bir genel bakış için bu harika Quirksmode sayfasına bakın .

Varsayılan

Tarayıcının varsayılan davranışı şuna eşittir:

table {border-collapse: collapse;}
td    {padding: 0px;}

cellpadding

Hücre içeriği ile hücre duvarı arasındaki boşluk miktarını ayarlar

table {border-collapse: collapse;}
td    {padding: 6px;}

cellspacing

Tablo hücreleri arasındaki boşluğu kontrol eder

table {border-spacing: 2px;}
td    {padding: 0px;}

Her ikisi de

table {border-spacing: 2px;}
td    {padding: 6px;}

Her ikisi de (özel)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Not: varsa border-spacingseti, bu işaret border-collapsetablonun özelliktir separate.

Kendin dene!

Burada bunu başarmanın eski HTML yolunu bulabilirsiniz.

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

Tablo hücreleri üzerinde kenar boşlukları ayarlamanın bildiğim kadarıyla bir etkisi yoktur. İçin de geçerlidir CSS eşdeğer cellspacingDİRborder-spacing - ancak Internet Explorer çalışmaz.

border-collapse: collapseHücre aralığını belirtildiği gibi güvenilir bir şekilde 0'a ayarlamak için kullanabilirsiniz , ancak başka bir değer için tek çapraz tarayıcı yolunun özelliği kullanmaya devam etmek olduğunu düşünüyorum cellspacing.

Bu saldırı, Internet Explorer 6 ve sonraki sürümleri, Google Chrome , Firefox ve Opera için çalışır :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

*Deklarasyon Internet Explorer 6 ve 7 için, ve diğer tarayıcılar düzgün göz ardı eder.

expression('separate', cellSpacing = '10px')döner 'separate', ancak her iki ifade çalıştırılır, çünkü JavaScript'te beklenenden daha fazla argüman iletebilirsiniz ve hepsi değerlendirilir.

Sıfır olmayan bir hücre aralığı değeri isteyenler için, aşağıdaki CSS benim için çalıştı, ancak yalnızca Firefox'ta test edebiliyorum.

Bkz Quirksmode bağlantısını başka yerde yayınlanan uyumluluk detayları için. Eski Internet Explorer sürümleriyle çalışmayabilir.

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

Bu sorunun basit çözümü:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Ayrıca, isterseniz stil sayfanıza cellspacing="0"eklemeyi border-collapse: collapsede unutmayın table.

Hücrenin içeriğini bir div ile sarın ve istediğiniz her şeyi yapabilirsiniz, ancak düzgün bir etki elde etmek için her hücreyi bir sütuna sarmanız gerekir. Örneğin, sol ve sağ kenar boşluklarını genişletmek için:

Yani CSS,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Evet, bir güçlük. Evet, Internet Explorer ile çalışır. Aslında, bunu sadece Internet Explorer ile test ettim, çünkü işte kullanmamıza izin verilen tek şey bu.

Sadece border-collapse: collapsemasanız paddingiçin ve thveya için kullanın td.

Bu stil tablolar için tam sıfırlama içindir - hücre dolgusu , hücre aralığı ve kenarlıklar .

Ben reset.css dosyasında bu tarzı vardı:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

TBH. CSS ile etraftaki tüm fannying için de kullanabilirsinizcellpadding="0" cellspacing="0" kaldırılmadığı için kullanabilirsiniz ...

<td>'S üzerinde marjlar öneren başka kimse bunu denemedi.

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

Sadece tablo verileriyle CSS dolgu kurallarını kullanın:

td { 
    padding: 20px;
}

Ve kenarlık aralığı için:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Ancak, kutu modelinin farklı uygulaması nedeniyle Internet Explorer gibi eski tarayıcılarda sorunlara neden olabilir.

W3C sınıflandırmalarından anladığım kadarıyla <table>s 'sadece' veri görüntülemek içindir.

Buna dayanarak <div>arka planlar ve her şeyle bir oluşturmak çok daha kolay buldum ve üzerinde kullanarak veri yüzen bir tablo var position: absolute;vebackground: transparent; ...

Chrome, Internet Explorer (6 ve üstü) ve Mozilla Firefox (2 ve üstü) üzerinde çalışır.

Kenar muhafaza elemanları gibi arasında bir mesafe parçası oluşturmak için kullanılan (ya da her durumda demek) vardır <table>, <div>ve <form>değil <tr>, <td>, <span>ya da <input>. Kapsayıcı öğeleri dışında herhangi bir şey için kullanmak, web sitenizi gelecekteki tarayıcı güncellemeleri için ayarlamakla meşgul edecektir.

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

CSS dolgu özelliğini kullanarak tablo hücrelerinin içindeki dolguları kolayca ayarlayabilirsiniz. Tablonun cellpadding özniteliğiyle aynı efekti üretmek için geçerli bir yoldur.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Benzer şekilde, hücre boşluğu niteliği gibi bitişik tablo hücre kenarlıkları arasındaki boşluğu uygulamak için CSS kenar boşluğu özelliğini kullanabilirsiniz. Ancak, kenar boşluğu çalışmak için border-collapse özelliğinin muse değeri ayrıdır, bu varsayılan değerdir.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Bunu dene:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Veya şunu deneyin:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

!importantSınır çöküşünden sonra kullandım

border-collapse: collapse !important;

ve IE7'de benim için çalışıyor. Hücre boşluğu özelliğini geçersiz kılıyor gibi görünüyor.

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingtablo ayarı ile ayarlanabilirken paddingCSS ile verilebilir .cell-spacingborder-spacing

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Keman .

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

Eğer marginçalışma yoktu, sete denemek displayait tretmek blockve sonra marjı çalışacaktır.

Tablolar için, HTML5'te hücre aralığı ve hücre dolgusu kullanılmıyor.

Şimdi hücre aralığı için sınır aralığı kullanmanız gerekiyor. Ve hücre dolgusu için sınır çöküşünü kullanmanız gerekir.

Ve bunu HTML5 kodunuzda kullanmadığınızdan emin olun. Her zaman bu değerleri bir CSS 3 dosyasında kullanmaya çalışın.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

Bir HTML tablosunda, cellpaddingve cellspacingşu şekilde ayarlanabilir:

İçin hücre dolgusu :

Sadece basit td/thhücre deyin padding.

Misal:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

İçin hücre aralığı

Sadece basit ara table border-spacing

Misal:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

CSS kaynak bağlantısı ile daha fazla tablo stili Burada CSS tarafından daha fazla tablo stili elde edersiniz .

Sadece kullanarak, CSS'nizde böyle bir şey yapabilir border-spacingve padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

Stili doğrudan tablonun kendisine eklemeye ne dersiniz? Bu, sayfanızda birden çok tablonuz varsa BAD yaklaşımı tableolan CSS'nizde kullanmak yerine :

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Bunu öneririm ve belirli tablo için tüm hücreler etkilenir.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Aşağıdaki kodu sadece a oluşturmak index.htmlve çalıştırmak için kontrol edebilirsiniz .

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

ÇIKTI :