问CSS:如何自定义由奇数和偶数分隔的标题行的背景？
EN

Stack Overflow用户

提问于 2020-05-06 21:18:34

回答 3查看 1.1K关注 0票数 0

在CSS html表格样式设计中，我们可以通过color定制标题行的字体颜色，在thead中通过background-color定制背景。这是一个例子。

thead {
    color: #555555;
    background-color: #f7f8f9;
}

我的困惑是，我们能否以分离的方式自定义标题的背景。比如奇数在中，甚至在red中。

html

css

html-table

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-05-06 21:53:17

请尝试以下几个重要部分：

    th:nth-child(odd) { background-color: blue; }
    th:nth-child(even) { background-color: red; }

<!DOCTYPE html>
<html>
<head>
<style> 
	th:nth-child(odd) { background-color: blue; }
	th:nth-child(even) { background-color: red; }  
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>lorem</td>
      <td>ipsum</td>
      <td>amet</td>
      <td>jabar</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

</body>
</html>

取自https://www.w3.org/Style/Examples/007/evenodd.en.html

希望能帮上忙。

票数 0

Stack Overflow用户

发布于 2020-05-06 21:43:26

thead实际上是HTML中的一行。因此，您不能使用CSS中的选择器访问tr和td。

另一方面，如果要将行的背景设置为条带，则可以为此使用CSS3 3的:nth-of-type(even)和:nth-of-type(odd) selectors。

HTML：

<table >
   <thead>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
   </thead>
   <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
   </tr>
   <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
   </tr>
   <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
   </tr>
   <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
   </tr>
   <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
   </tr>
</table>

CSS：

table, th, td {
  border: 1px solid #888;
}

tr:nth-of-type(odd){
   background-color: #00f;
}

thead, tr:nth-of-type(even){
   background-color: #f00;
}

下面是示例：https://codepen.io/sundowatch/pen/MWaQqym

票数 0

Stack Overflow用户

发布于 2020-05-07 00:42:26

您可以使用jQuery来解决这个问题。注意，在执行此操作时，需要添加jQuery脚本。如果您还没有使用Visual，您可以从NuGet下载它。

HTML代码：

    <div>
        <table>
            <tr>
                <td>Even</td>
            </tr>
            <tr>
                <td>Odd
                </td>
            </tr>
            <tr>
                <td>Even</td>
            </tr>
            <tr>
                <td>Odd</td>
            </tr>
            <tr>
                <td>Even</td>
            </tr>
        </table>
    </div>

CSS:

  .zebra {
        background-color: blue;
        color: white;
    }

    .zebra1 {
        background-color: red;
        color: white;
    }

JAVASCRIPT:

    <script src="Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("tr:even").addClass("zebra1"); //This code makes gives all even rows in the table the class of zebra1
        $("tr:odd").addClass("zebra"); //This code makes all the odd rows in the table the class of zebra
    });