Цвет фона альтернативной таблицы CSS3 в зависимости от класса строки таблицы - PullRequest
Новая
       13

Цвет фона альтернативной таблицы CSS3 в зависимости от класса строки таблицы

0 голосов
/ 28 января 2019

Должен быть хороший способ чередовать цвета фона строки таблицы в зависимости от класса.В настоящее время я просто делаю что-то вроде этого: 

/* Staff Table */
table#user_provisioning .bpink { background-color: lavenderblush; }
table#user_provisioning .fred { color: red; }
table#user_provisioning tr.Administrators, tr.ProfessionalStaff { background-color: honeydew; }
table#user_provisioning tr.Deans, tr.SupportStaff { background-color: white; }
table#user_provisioning td { text-align: left; }

Я думаю, что есть способ сделать что-то вроде: 

table#user_provisioning tr.{foreach class}:nth-child(odd) { background-color: honeydew; }

К сожалению, я не уверен, как включитьвсе tr классы для таблицы и идут четные / нечетные в зависимости от этого.

Предложения?

Редактировать: Добавление фрагментированного / отредактированного кода страницы 

table#table_organization tr.unsure,
tr.dept,
tr.org {
  background-color: honeydew;
}

table#table_organization tr.board,
tr.prog,
tr.ssa {
  background-color: white;
}
<section>
  <h1> Organization </h1>
  <table id="table_organization" class="sortable">
    <tr>
      <th> Dept. </th>
    </tr>
    <tr class="unsure">
      <td> - </td>
    </tr>
    <tr class="board">
      <td> Board </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
  </table>
</section>

Ответы [ 2 ]

0 голосов
/ 29 января 2019 

table#table_organization tr.unsure,
tr.dept:nth-of-type(odd),
tr.org {
  background-color: honeydew;
}

tr.dept:nth-of-type(even){
    background-color: red;
}

table#table_organization tr.board,
tr.prog,
tr.ssa {
  background-color: white;
}
<section>
  <h1> Organization </h1>
  <table id="table_organization" class="sortable">
    <tr>
      <th> Dept. </th>
    </tr>
    <tr class="unsure">
      <td> - </td>
    </tr>
    <tr class="board">
      <td> Board </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
  </table>
</section>
0 голосов
/ 28 января 2019

К сожалению, CSS не имеет псевдо-селектора :nth-of-class.Поскольку количество строк очень ограничено, использование соседнего селектора брата + может помочь (отображается только для .dept): 

.dept {
  background: yellow;
}

.dept+.dept {
  background-color: orange;
}

.dept+.dept+.dept {
  background-color: red;
}
<table id="table_organization" class="sortable">
  <tr>
    <th> Dept. </th>
  </tr>
  <tr class="dept">
    <td> Department </td>
  </tr>
  <tr class="dept">
    <td> Department </td>
  </tr>
  <tr class="dept">
    <td> Department </td>
  </tr>
</table>
...