it-swarm.asia

كيفية زيادة المسافة بين أعمدة الجدول في HTML؟

دعنا نفترض أنني أردت إنشاء جدول أحادي التجديف به 50 بكسل بين كل عمود ، ولكن يوجد حشوة 10 بكسل في الأعلى والأسفل.

كيف أفعل هذا في HTML/CSS؟

44
idude

ليست هناك حاجة إلى <td> وهمية. استفد من border-spacing بدلاً من ذلك. تطبيقه مثل هذا:

HTML

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

CSS:

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

رؤيته في العمل.

79
daniels

عيّن عرض <td> s إلى 50px ثم أضف <td> + مزيف آخر <td>

كمان

HTML

<table>
    <tr>
        <td>First Column</td>
        <td></td>
        <td>Second Column</td>
        <td></td>
        <td>Third Column</td>
    </tr>
</table>

[~ # ~] المغلق [~ # ~]

table tr td:empty {
    width: 50px;
}

table tr td {
    padding-top: 10px;
    padding-bottom: 10px;
}

الكود الموضح:

تبحث قاعدة CSS الأولى عن td's فارغة ومنحهم عرضًا قدره 50 بكسل ثم القاعدة الثانية تعطي الحشو العلوي والسفلي لكل td's.

12
Mohammad Areeb Siddiqui

إذا فهمت بشكل صحيح ، فأنت تريد هذا كمان .

HTML

<table>
<tr>
    <td>Hello HTML!</td>
    <td>Hello CSS!</td>
    <td>Hello JS!</td>
</tr>

CSS:

table {
    background: gray;
}
td {    
    display: block;
    float: left;
    padding: 10px 0;
    margin-right:50px;
    background: white;
}
td:last-child {
    margin-right: 0;
}
9
Igor

يمكنك فقط استخدام الحشو. مثل ذلك:

http://jsfiddle.net/davidja/KG8Kv/

[~ # ~] أتش تي أم أل [~ # ~]

   <table>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td>item2</td>
        </tr>
    </table>

[~ # ~] المغلق [~ # ~]

 td {padding:10px 25px 10px 25px;}

OR

 tr td:first-child {padding-left:0px;}
 td {padding:10px 0px 10px 50px;}
7
David Allen

الحل الأفضل من الإجابة المحددة هو استخدام حجم الحدود بدلاً من تباعد الحدود. المشكلة الرئيسية في استخدام تباعد الحدود هي أنه حتى العمود الأول سيكون له تباعد في المقدمة.

فمثلا،

table {
  border-collapse: separate;
  border-spacing: 80px 0;
}

td {
  padding: 10px 0;
}
<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

لتجنب هذا الاستخدام: border-left: 100px solid #FFF; وحدد border:0px للعمود الأول.

فمثلا،

td,th{
  border-left: 100px solid #FFF;
}

 tr>td:first-child {
   border:0px;
 }
<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
    <td>Column3</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
    <td>3000</td>
  </tr>
</table>
5
Ani Menon

محاولة

padding : 10px 10px 10px 10px;
4
Chetan Gawai