Tablo satırını doldurma

Question 1

<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

İşte dolgunun görünümü. İçerideki td'nin nasıl etkilenmediğini görün. Çözüm nedir? Tablo Satırı Doldurma Sorunu

Question 2

İşin püf noktası, tdöğelere dolgu yapmak, ancak ilk için bir istisna yapmaktır (evet, hilekar, ancak bazen tarayıcının kurallarına göre oynamak zorundasın):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

İlk çocuk nispeten iyi destekleniyor: https://developer.mozilla.org/en-US/docs/CSS/:first-child

Yatay dolgu için aynı mantığı kullanarak kullanabilirsiniz tr:first-child td.

Alternatif olarak, kullanarak ilk sütunu dahil operatör . Ancak bunun için destek şu anda o kadar iyi değil. not

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}

Question 3

Gelen CSS 1 ve CSS 2 şartname, dolgu dahil tüm unsurları için kullanılabilir <tr>. Yine de tablo satırı ( <tr>) için dolgu desteği CSS 2.1 ve CSS 3 spesifikasyonlarında kaldırılmıştır . Kenar boşluğu özelliğini ve diğer birkaç tablo öğesini (üstbilgi, altbilgi ve sütunlar) da etkileyen bu sinir bozucu değişikliğin arkasındaki nedeni hiç bulamadım.

Güncelleme: Şubat 2015'te, posta listesindeki bu iş parçacığı , www-style@w3c.orgtablo satırı için dolgu desteği ve kenarlık ekleme hakkında tartışıldı. Bu, standart kutu modelini tablo satırı ve tablo sütunu öğelerine de uygular. Bu tür örneklere izin verirdi . İş parçacığı, tablo satırı doldurma desteğinin CSS standartlarında asla var olmadığını, çünkü karmaşık düzen motorlarına sahip olacağını gösteriyor. 30 Eylül 2014 Editörün CSS Taslağı temel kutu modelinde, tablo satırı ve tablo sütunu öğeleri dahil tüm öğeler için dolgu ve sınır özellikleri mevcuttur. Sonunda bir W3C önerisi haline gelirse, html + css örneğiniz sonunda tarayıcılarda amaçlandığı gibi çalışabilir.

Question 4

td dolgusunu ver

Question 5

seçenek 1

Bunu, satıra (tr) şeffaf bir kenarlık ekleyerek de çözebilirsiniz.

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

Bir cazibe gibi çalışır, ancak düzenli sınırlara ihtiyacınız varsa, bu yöntem ne yazık ki işe yaramayacaktır.

seçenek 2

Satırlar, hücreleri gruplamanın bir yolu olarak işlev gördüğünden, bunu yapmanın doğru yolu,

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}

Question 6

Bu çok eski bir gönderi, ancak son zamanlarda karşılaştığım benzer bir sorunun çözümünü göndermem gerektiğini düşündüm.

Yanıt : Bu sorunu, tr öğesini bir blok öğesi olarak görüntüleyerek, yani tr öğesi için display: block CSS'si belirleyerek çözdüm . Bunu aşağıdaki kod örneğinde görebilirsiniz.

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <h2>Lorem Ipsum</h2>
        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
          eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
          luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
        </p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.

Snippet'i genişlet

Question 7

Bu stili tabloya kolayca ekleyebilirsiniz.

table {
    border-spacing: 15px;
}