Soru Tablo satırı doldurma


<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 dolgu nasıl görünüyor. İçerisindeki td'nin nasıl etkilenmediğini görün. Çözüm nedir? Table Row Padding Issue


51
2017-09-07 07:33


Menşei


kullanım <div> ve <p> masa yerine - Natrium
Sunulan veriler tablo şeklindedir ve bir tabloda bulunmalıdır. - Spencer


Cevaplar:


Hile üzerinde dolgu vermek td öğeleri, ancak ilk için bir istisna (evet, bu hacky, ama bazen tarayıcının kurallarına göre oynamak zorunda):

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

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

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

Yatay dolgu için aynı akıl yürütmeyi kullanabilirsiniz. tr:first-child td.

Alternatif olarak, ilk sütunu kullanarak hariç tutun not Şebeke. Bunun için destek şu anda iyi değil.

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

77
2017-09-07 08:05



@JanDvorak düzeltildi;) - Joeri Hendrickx
Ben kullanırım: tek bir öğeyi hariç tutmak için operatör değil. tr gibi: değil (#first_row) - jeff
@CengizFrostclaw gerçekten, bu daha fazla consise olurdu. Ama destek iyi değil. - Joeri Hendrickx
Oh, haklı olabilirsin. Bilmiyorum, buna inanmak mantıklı geliyor: operatör daha destekli değil, ama yine de sadece Chrome'da test ediyorum: D - jeff
Bu 'hacky' değil, bu seçmenler için tasarlanan tam olarak bu - spinners


İçinde CSS 1 ve CSS 2 özellikleri, dolgu dahil olmak üzere tüm öğeler için kullanılabilir <tr>. Ancak masa sıraları için dolgu desteği (<tr>) içinde kaldırıldı CSS 2.1 ve CSS 3 özellikleri. Margin özelliğini ve diğer birkaç tablo unsurunu (başlık, altbilgi ve sütunlar) da etkileyen bu can sıkıcı değişimin arkasındaki sebebi hiç bulamadım.

Güncelleme: Şubat 2015'te bu konu üzerinde www-style@w3c.org posta listesi, masa sıraları için dolgu ve kenarlık desteği ekleme hakkında tartışılmıştır. Bu, standart kutu modelini tablo satırı ve tablo-sütun öğelerine de uygular. İzin verecek bu tür örnekler. İş parçacığı, CSS standartlarında tablo sıralı dolgu desteğinin hiçbir zaman mevcut olmadığını ve karmaşık düzen motorlarına sahip olacağını öne sürmektedir. 30 Eylül 2014'te Editörün Taslak CSS temel kutu modeli, dolgu ve kenarlık özellikleri, tablo satırı ve tablo sütunu elemanları dahil tüm öğeler için mevcuttur. Sonunda bir W3C tavsiyesi haline gelirse, html + css örneğiniz tarayıcılarda amaçlanan şekilde çalışabilir.


12
2018-06-04 16:02



Sebebiyle de çok ilgilenecektim! - Dan


td doldurma


6
2017-09-07 07:42



Tek şey, bir tr içinde 2 td varsa o zaman ben istemiyorum 2 td arasında dolgu olacak. - Spencer


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

Cevap : Bu sorunu görüntüleyerek çözdüm tr eleman olarak blok eleman, yani bir CSS'yi belirtmek Ekran bloğu için tr öğesi. 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.


0
2017-12-25 05:48



Bu, masa düzeninin genellikle nasıl çalıştığını gösteren vidalar. Bunu yapıyorsanız, bir tablo kullanmamalısınız - düzenli olarak kullanın div. - caesay


seçenek 1

Bunun gibi, satırda (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 çekicilik gibi çalışır, ancak düzenli sınırlara ihtiyacınız varsa, bu yöntem ne yazık ki işe yaramaz.

seçenek 2

Satırlar grup hücrelerine bir yol gibi davrandığından, bunu yapmanın doğru yolu, kullanmaktır.

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

0
2017-07-14 04:03





<p> içeride <td> biçimlendirmeyi bozuyor. Çıkarmayı dene.


-6
2017-09-07 07:42



paragraf etiketini ve hatta başlık 2 etiketini kaldırmayı denedi ve işe yaramadı - Spencer