Таблицы CSS: фиксированный столбец с альтернативными цветами строк? - PullRequest
Новая
       11

Таблицы CSS: фиксированный столбец с альтернативными цветами строк?

0 голосов
/ 25 апреля 2018

Я пытаюсь создать таблицу с фиксированным первым столбцом и окраской чередующихся строк.У меня исправлен первый столбец, а альтернативные строки раскрашены с помощью nth-child.Проблема в том, что альтернативные цвета строк не применяются к фиксированному столбцу.См. jsfiddle .Это моя первая попытка css, поэтому я уверен, что упускаю что-то довольно очевидное.

html 

<div class="wb-standings-table"><table class="standings">
  <tr>
    <td class="wb-standings-col1"><b>Player</b></td>
    <th>PTS↑</th>
    <th>PPR</th>
    <th>TPP</th>
    <th>SPC</th>
    <th>TUG</th>
    <th>LOG</th>
    <th>CRK</th>
    <th>EUC</th>
    <th>PKR↓</th>
    <th>DRT</th>
    <th>PNG</th>
  </tr>
  <tr>
    <td class="wb-standings-col1">Chuck</td>
    <td class="wb-gray">9</td>
    <td class="wb-gray">15</td>
    <td class="wb-gray">24</td>
    <td class="wb-gray">-</td>
    <td class="wb-gray">2</td>
    <td class="wb-gray">-</td>
    <td class="wb-gray">3</td>
    <td class="wb-gray">3</td>
    <td class="wb-green">0</td>
    <td class="wb-green">1</td>
    <td class="wb-green">0</td>
  </tr>
  <tr>
    <td class="wb-standings-col1">Rico</td>
    <td class="wb-gray">4</td>
    <td class="wb-gray">10</td>
    <td class="wb-gray">14</td>
    <td class="wb-gray">-</td>
    <td class="wb-gray">0</td>
    <td class="wb-gray">3</td>
    <td class="wb-gray">-</td>
    <td class="wb-gray">0</td>
    <td class="wb-green">0</td>
    <td class="wb-green">1</td>
    <td class="wb-gray">0</td>
  </tr>

css 

.wb-standings-container {
    width:auto;
    white-space:nowrap;
    background-color:#fff;
    border-radius:0px;
    margin:0px;
    overflow-x:auto;
}
.wb-standings-header {
    font-size:1.5em;
    margin:10px;
    font-weight:bold;
}
.wb-standings-footer {
    font-size:.8em;
    margin:8px;
}
.wb-standings-table {
    overflow-x:auto;  
    margin-left:100px; 
    overflow-y:visible;
}
table.standings {
    border-collapse:collapse;
}
table.standings th {
    white-space:nowrap;
    color:#808080;
    text-decoration:underline;
}
table.standings td {
    white-space:nowrap;
    text-align:center;
    min-width: 50px;
}
table.standings tr:nth-child(even) {background: #f2f2f2}
table.standings tr:nth-child(odd) {background: #FFF}
table.standings td:nth-child(1) {
    border-right: 1px solid #e6e6e6;
    box-shadow: 3px 0px 3px -3px rgba(0, 0, 0, 0.4);
}
table.standings td:nth-child(4) {border-right: 1px solid #e6e6e6;}
table.standings tr:nth-child(1) {
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}

table.standings .wb-standings-col1 {
    position:absolute; 
    width:90px; 
    left:8px;
    top:auto;
    text-align:left;
    color:#057aff;
}

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Вы сделали цвет фона для тега "tr", но ваш первый "td" остается за пределами "tr".Чтобы исправить это, вы должны использовать фон на «td» вместо «tr»: 

table.standings tr:nth-child(even) td {background: #f2f2f2}
table.standings tr:nth-child(odd) td {background: #FFF}

и изменить его ширину на 100px: 

table.standings .wb-standings-col1 {
    position:absolute; 
    width:100px; 
    left:8px;
    top:auto;
    text-align:left;
    color:#057aff;
}

Также я думаю, что вы должны удалитькоробка-тень этого: 

table.standings td:nth-child(1) {
    border-right: 1px solid #e6e6e6;
    /*box-shadow: 3px 0px 3px -3px rgba(0, 0, 0, 0.4);*/
}
0 голосов
/ 25 апреля 2018

Вы можете просто добавить специальный случай в класс col1 следующим образом: 

table.standings tr:nth-child(even),
table.standings tr:nth-child(even) .wb-standings-col1 {
  background: #f2f2f2
} 
table.standings tr:nth-child(odd),
table.standings tr:nth-child(odd) .wb-standings-col1 {
  background: #FFF
}

Вы можете добавить другой селектор к тому же определению CSS, используя запятую для разделения.Таким образом, вы все еще можете управлять обоими определениями, изменяя одну спецификацию CSS.

Относительно того, почему это происходит .... Я не совсем уверен.Я предполагаю, что это как-то связано с тем фактом, что класс .wb-standings-col1 позиционируется абсолютно, и это портит рендеринг таблицы внизу.Я заметил в инструментах разработчика Chrome, что эта конкретная ячейка установлена ​​на display: block, а остальные ячейки установлены на display: table-cell.Это может быть еще одна причина для этого.Кто-то еще должен дать вам этот ответ:)

...