Tablo ve metin arasına nasıl boşluk eklenir?

Tablo kenarlığı (her taraf) ve metin arasına nasıl boşluk ekleyebilirim? Dolgu ile denedim ama bu işe yaramadı. Boşluk eklemenin bir yolu var mı?

CSS

.border1 {
  border-top:thin solid;
  border-bottom:thin solid;
  border-left:thin solid;
  border-right:thin solid;
  border-color:black;
  padding: 5px;
}

HTML

<table class="formLayout" width="81%" cellspacing="0" cellpadding="0">
    <tr>
        <td class="border1">
        
Message to display

</td> </tr> </table>
0
"İşe yaramadı" yı tanımlayın. Dolgu işleminin etkili olduğundan emin olmak için elemanı kontrol ettiniz mi? Doldurma gerçekten de bir elemanın içeriği ve çevresi arasına boşluk eklemenin yoludur.
katma yazar Utkanos, kaynak
@Utkanos: öyleyse kenarlık ve metin arasına nasıl boşluk ekleyebilirim? Div'den geçtim ama kodlardan hiçbirini değiştiremiyorum. bu yüzden burada sıkışıp kaldım.
katma yazar Bala K, kaynak

7 cevap

padding is the way to add space between text content and border.

Kodunuzu, etkisini görebilmeniz için temizledim. Aşağıdaki kodu kullanın ve efekti görün

Stil

.table-border {
        border:1px solid black;
        padding: 10px;  
        border-collapse: collapse;      
    }

HTML

<table width="81%" cellspacing="0" class="table-border">
            <tr>
                <td class="table-border" >
                    One
                </td>  
                <td class="table-border" >
                    Two
                </td>   
            </tr>

      </table>
1
katma

You are seeing more space on top and bottom due to

. Remove

and then you can increase the padding Or else you can use like below.

padding: 5px 10px;

Üstte ve altta 5px dolgusu ve solda ve sağda 10px ekler

1
katma

You can fix that using padding-left property in CSS for the

.

Çalışma Kodu Parçacığı:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.border1 {
  border-top:thin solid;
  border-bottom:thin solid;
  border-left:thin solid;
  border-right:thin solid;
  border-color:black;
  padding: 5px;
}

p{
  padding-left: 50px;
}
<table class="formLayout" width="81%" cellspacing="0" cellpadding="0">
  <tr>
    <td class="border1">
      
Message to display

</td> </tr> </table>
</div> </div>

Read up: padding-left - CSS | MDN


P.S. To get the text aligned in the center, use text-align: center; in the CSS for p.

0
katma

Benim için dolgu çalışıyor sadece kontrol edin

<table class="formLayout" width="81%" cellspacing="0" cellpadding="0">
<tr>
    <td class="border1">
    
Message to display

</td> </tr> </table> .border1 { border-top:thin solid; border-bottom:thin solid; border-left:thin solid; border-right:thin solid; border-color:black; padding: 18px 122px 11px; }

The Fiddle https://jsfiddle.net/635tfeLx/

0
katma

CSS

.border1 {
      border-top:thin solid;
      border-bottom:thin solid;
      border-left:thin solid;
      border-right:thin solid;
      border-color:black;
      border-color: darkred;
      border-style: solid;
      color: red;
      padding: 5px 15px;    
    }

HTML

<table class="formLayout" width="81%" cellspacing="0" cellpadding="0" style="border:2px;">
<tr>
    <td class="border1">    
        
Message to display

</td> </tr> </table>
0
katma

"Align" yazısını: "p" inizi bu şekilde ortalamak için kullanabilirsiniz:

p {
    text-align: center;
    }

Buraya gelin

0
katma

Elbette paragrafa her zaman kenar boşluğu ekleyebilirsiniz, bunun gibi bir şey:

.formLayout tr td.border1 p{
   margin: 5px;
}

Sonra bu korkunç font etiketini ve b etiketini kaldırabilir ve p stilini istenen sonuçlar için kullanabilirsiniz:

.formLayout tr td.border1 p{
   margin: 5px;
   font-family: Arial;
   font-weight: bold;
}
0
katma