CSS: Как настроить фон строк заголовков, разделенных четным и нечетным? - PullRequest
Новая
       4

CSS: Как настроить фон строк заголовков, разделенных четным и нечетным?

0 голосов
/ 07 мая 2020

В дизайне стиля таблицы CSS html мы можем настроить цвет шрифта строки заголовка на color, а фон на background-color в thead. Вот пример. 

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

Меня беспокоит, можем ли мы настроить фон заголовка отдельно или нет. Как нечетные в синем и четные в красном .

Ответы [ 3 ]

0 голосов
/ 07 мая 2020

Попробуйте следующее, важные части: 

    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 голосов
/ 07 мая 2020

Вы можете использовать jQuery, чтобы решить эту проблему. Обратите внимание, что при этом вам необходимо добавить сценарий jQuery. Если у вас его еще нет, вы можете загрузить его из NuGet, если используете Visual Studio.

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>

THE CSS: 

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

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

THE 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
    });

Этот jQuery делает прикрепленные классы зебры и зебры1 к нечетным и четным строкам таблицы соответственно.

0 голосов
/ 07 мая 2020

thead на самом деле является строкой в ​​таблице HTML. Таким образом, вы не можете получить доступ к tr и td с помощью этого селектора в CSS.

С другой стороны, если вы хотите сделать фон строк полосатым, вы можете использовать для этого CSS3 :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

...