Как применить отступ к столбцу, используя <col>и CSS в Firefox? - PullRequest
Новая
       20

Как применить отступ к столбцу, используя <col>и CSS в Firefox?

5 голосов
/ 15 мая 2009

Пример: 

<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>?

Ответы [ 3 ]

4 голосов
/ 15 мая 2009

Это не должно работать, по крайней мере, с 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;  
}
0 голосов
/ 13 ноября 2013

Ответ Алекса работает для меня, за исключением того, что он не очень масштабируем для многих столбцов и быстро становится трудным для чтения. Вместо этого я использовал :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;
}
0 голосов
/ 15 мая 2009

Это работает для меня в 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;
}

Какой тип документа вы используете ... и какой браузер используете ...

хм ... только что проверил, похоже, не работает в Firefox

...