如何应用填充使用 CSS在Firefox中柱？

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>

色彩被施加到柱而不是填充。如果使用直接细胞类/ IDS，它的工作原理。

我是被迫使用它们，或者有没有办法采取<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;
}

什么的doctype您使用的...和你使用的是什么浏览器...

嗯...只是检查似乎没有在Firefox工作

亚历克斯的回答对我的作品，但它并不适合大量列的可伸缩性非常快速地变得难以阅读。我结束了使用: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