Question

如果您希望页面上的所有表具有相同的备用行着色，则以下代码可以正常工作：

<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>

但我只想让我的一张桌子有这个替代阴影。我以为我可以更换名称＆＃34; table＆＃34;用＆＃34; .floatedTable＆＃34;使用class =＆＃39; floatedTable＆＃39;将着色应用于表格但它没有做任何事情。

我喜欢这样做的方法就是找到要写的内容

Answer 1

如果您希望样式仅按类应用于某个表，则应将TH嵌套在该类定义中：

<style>
    .floatedTable{
        border-collapse: collapse;
        width: 100%;
    }

    .floatedTable th, .floatedTable td {
        text-align: left;
        padding: 8px;
    }

    .floatedTable tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>

当你开始学习SCSS时，你会这样做：

.floatedTable {
  border-collapse: collapse;
  width: 100%;
  th, td {
    text-align: left;
    padding: 8px;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
}

Answer 2

Phiter打败了我，但这是一个有效的例子：https://jsfiddle.net/targumon/y8z6hgxn/2/

.floatedTable tr:nth-child(even) {
  background-color: #d08080;
}

Answer 3

对于行着色，您可以使用引导类＆＃34; table-striped＆＃34;在HTML中。

该类仅对其包含的表元素有效。

<table class="table table-striped">
 <tr>
  <th>Meals</th>
  <th>Prices</th>
  <th>Drinks</th>
  <th>Prices</th>
 </tr>

 <tr>
  <td>Macaroni and Cheese</td>
  <td>£3.59</td>
  <td>Coca Cola</td>
  <td>£1.15</td>
 </tr>
</table>

我想在HTML中替换表行的着色，但只将其应用于多个表中的一个

3 个答案: