كيفية تطبيق الحشو إلى عمود باستخدام <عمود> وCSS في فايرفوكس؟

StackOverflow https://stackoverflow.com/questions/868009

  •  22-08-2019
  •  | 
  •  

سؤال

مثال: 

<style type="text/css">
    table {
        border: 1px solid red;
        border-collapse: collapse;
        text-align: left;
    }
    #col-1 {
        padding-left: 20px;
        background-color: tan;
    }
    #specific-cell {
        padding-left: 20px;
    }
</style>
<table>
    <col id="col-1">
    <col id="col-2">
    <tr>
        <th>foo</th>
        <th>bar</th>
    </tr>
    <tr>
        <td>data1</th>
        <td>data2</th>
    </tr>
    <tr>
        <td id="specific-cell">data1</th>
        <td>data2</th>
    </tr>
    <tr>
        <td>data1</th>
        <td>data2</th>
    </tr>
</table>

ويتم تطبيق اللون على عمود ولكن ليس الحشو. إذا كنت تستخدم الطبقات / هويات على الخلايا مباشرة، وأنها تعمل.

وانا اضطر لاستخدامها، أم أن هناك طريقة الاستفادة من العلامة <col>؟

هل كانت مفيدة؟

المحلول

وليس من المفترض أن يعمل، على الأقل مع CSS 2.1. قد يكون لديك نظرة على CSS 2.1 الجدول الأعمدة مواصفات .

ويمكنك التحايل على هذه باستخدام :first-child و+: 

/* first column */
td:first-child {
    padding-left: 20px;  
}

/* second column */ 
td:first-child + td {
    padding-left: 10px;  
}

/* third columns */ {
td:first-child + td + td {
    padding-left: 0;  
}

نصائح أخرى

وهذا يعمل بالنسبة لي في IE مع DOCTYPE التالية 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

ووأساليب 

#col-1 {
    padding-left: 50px;
    background-color: tan;
}
#col-2 {
    padding-left: 100px;
    background-color: lightgreen;
}

ما نوع المستند الذي تستخدمه ... وما المتصفح الذي تستخدمه ...

وهم ... فحص فقط لا يبدو للعمل في فايرفوكس

والجواب اليكس تعمل بالنسبة لي، إلا أنها ليست قابلة للغاية لكثير من الأعمدة وسرعان ما يصبح من الصعب قراءة. انتهى بي الأمر باستخدام :nth-of-type(n) بدلا من ذلك، ولكن تم تقديم هذا محدد في CSS3.

ومحدد: :nth-of-type(n)
على سبيل المثال: p:nth-of-type(2)
النتيجة: يختار كل عنصر <p> هذا هو العنصر الثاني <p> من الأم

مثال: 

/*column 1*/
#myTable td:nth-of-type(1)
{
    padding-left: 20px;
    background-color: tan;
}
/*column 2*/
#myTable td:nth-of-type(2)
{
    padding-left: 10px;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top