将 CSS 应用于 Table 行

Question

我知道了 table:

<table class="tg">
  <tr>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
  </tr>
  <tr class='trip'>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
  </tr>
  <tr>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
  </tr>
  <tr>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
  </tr>
  <tr class='trip'>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
  </tr>
</table>

并且我想为 class 为 trip

的行着色

如何使用分配给 table 的行程和 tg？

我创建了一个简单的 fiddle 来展示它。 https://jsfiddle.net/sagsb415/1/

Answer 1

.tg .trip td{
  background: red;
}

Answer 2

直接用你的风格写-sheet旅行class

 .tg .trip {
    padding:5px 5px;
    background-color:#8600b3;
}

Answer 3

您的 fiddle 在 tr 和 .trip 之间有一个 space。试试这个。

.tg tr.trip {
    padding:5px 5px;
    background-color:#8600b3;
}

https://jsfiddle.net/sagsb415/2/

Answer 4

使用以下 css:

.trip >td{
background-color:red
}

Answer 5

.tg tr.trip {
  padding:5px 5px;
  background-color:#8600b3;
}

Answer 6

试试这个...

.tg tr.trip {
  background: #f6c;
}

<table class="tg">
  <tr>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
  </tr>
  <tr class='trip'>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
  </tr>
  <tr>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
  </tr>
  <tr>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
  </tr>
  <tr class='trip'>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
  </tr>
</table>

将 CSS 应用于 Table 行

Applying CSS to Table rows

css

rows

css-tables