Wie Auffüllen einer Spalte und CSS in Firefox bewerben?

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

  •  22-08-2019
  •  | 
  •  

Frage

Beispiel: 

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

Die Farbe wird auf die Säule aufgetragen, aber nicht die Polsterung. Wenn ich Klassen / ids auf Zellen verwenden, um direkt, es funktioniert.

Bin ich gezwungen, sie zu benutzen, oder ist es eine Möglichkeit, die Vorteile des <col> Tages nehmen?

War es hilfreich?

Lösung

Es ist nicht arbeiten, zumindest mit CSS 2.1 soll. Sie können einen Blick auf die CSS 2.1 Tabellenspalten Spezifikation .

Sie können dies umgehen, indem :first-child und + mit: 

/* 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;  
}

Andere Tipps

Dies funktioniert für mich in IE mit der folgenden DOCTYPE 

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

und die Stile 

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

Was Doctype verwenden Sie ... und welche Browser verwenden Sie ...

hmm ... gerade überprüft scheint nicht in Firefox arbeiten

Alex Antwort funktioniert für mich, außer es für viele Spalten nicht sehr skalierbar ist und wird schnell schwer zu lesen. Ich landete mit :nth-of-type(n) stattdessen jedoch diese Wähler in CSS3 eingeführt wurde.

Wählschalter: :nth-of-type(n)
Beispiel: p:nth-of-type(2)
Ergebnis: Wählt jedes <p> Element, das das zweite <p> Element seiner Eltern ist

Beispiel: 

/*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;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top