5

例：

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

色は列に適用されますが、パディングには適用されません。セルでクラス/IDを直接使用すると、機能します。

私はそれらを使用することを余儀なくされていますか、それとも<col>タグを利用する方法はありますか?

4

3 に答える 3

0

アレックスの答えは私にとってはうまくいきますが、多くの列に対してあまりスケーラブルではなく、すぐに読みにくくなります。代わりに使用することになりました:nth-of-type(n)が、このセレクターは CSS3 で導入されました。

セレクター: :nth-of-type(n)
例: p:nth-of-type(2)
結果:親<p>の 2 番目の要素であるすべての要素を選択します<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;
}
于 2013-11-12T20:17:26.040 に答える