Не получается работать с классом psuedo: nth-child - PullRequest
Новая
       0

Не получается работать с классом psuedo: nth-child

1 голос
/ 21 марта 2020

Я пытаюсь сделать так, чтобы каждая строка в моей таблице имела определенный цвет. Я пробовал оба: nth-child и: nth-of-type. Но это не работает с элементами tr. Я заставляю его работать с th и td, приводя к каждому другому столбцу, но это не то, что я ищу. Я не могу понять, почему это не работает Вот копия моего кода:

HTML: 


    <html>
     <body>
      <div class="display-div">
        <table id="content-table">
           <tr>
              <td>Content</td>
              <td>Content</td>
          </tr>
           <tr>
              <td>Content</td>
              <td>Content</td>
          </tr>
           <tr>
              <td>Content</td>
              <td>Content</td>
          </tr>
        </table>
       </div>
     </body>
    </html>

CSS: 

.display-div {
overflow: scroll;
}

#content-table {
width: 100%;
text-align: center;
position: relative;
border-collapse: collapse;
}

tr:nth-child(even) {
background-color: black;
}

1 Ответ

0 голосов
/ 21 марта 2020

Я когда-то делал это go, вы можете попробовать что-то вроде этого. Это поможет вам начать, я даже работал над добавлением различных color для столбцов, так как это не ваше требование, я удалил эту часть. 

  $(document).ready(function () {
     
      $("table#id2 tr:even").css("background-color", "LightBlue");
      $("table#id2 tr:odd td").css("background-color", "LightYellow");
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="id2" border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

ИЛИ

Вы можете сделать это следующим образом: 

$("tr:even").css("background-color", "#eeeeee");
$("tr:odd").css("background-color", "#ffffff");

Если вам нужно только в CSS, то: 

 tr:nth-child(even) {background: #CCC}
    tr:nth-child(odd) {background: #FFF}
<table id="id2" border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...