Question

在CSS中，我有

table {
    max-width:100%;
    background-color:transparent;
    border-collapse:collapse;
    border-spacing:0
}

在HTML中，我有

<table class="table">
        <tr>
           <td>
               <img width="90px" src="logo.png">
           </td>

           <td>
               <div class="page-header">Header
           <td>
        </tr>
</table>

如何在不更改CSS文件中的其他表格的<td>的情况下更改第二个<td>的背景颜色？

请注意，我正在使用Bootstrap作为我的基本CSS。在修改代码时，它有点复杂。

Answer 1

使用CSS可以像

那样

    table tr:first-child td:nth-child(2){
         background:red;
    }

Answer 2

将类添加到所需的<td>元素。

在class中，指定所需的background

See here for a working example

Answer 3

将类添加到要更改的td（例如，使用'headerTd'）：

<table class="table">
    <tr>
    <td><img width="90px" src="logo.png"></td>

    <td class="headerTd"><div class="page-header">Header<td>
    </tr>
</table>

然后将以下规则添加到您的css：

.headerTd{
    background-color:red;
}

Answer 4

只有第二个才能设置样式属性。

style="color:red"

Answer 5

.secondTD {
    background:red;
}


<table class="table">
        <tr>
        <td><img width="90px" src="logo.png"></td>

        <td class="secondTD"><div class="page-header">Header<td>
        </tr>
</table>

但如果你想要没有课程，那么

table:tr:td {
    background:red;
}


<table class="table">
        <tr>
        <td><img width="90px" src="logo.png"></td>

        <td><div class="page-header">Header<td>
        </tr>
</table>

如果每行都有第一个td：

table>tr:td {
    background:red;
}

更改特定的表格背景

5 个答案: