Sticky Columns - разные шрифты / жирность на одном и том же CSS - PullRequest
Новая
       20

Sticky Columns - разные шрифты / жирность на одном и том же CSS

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

Я пытаюсь составить таблицу с двумя липкими колонками с каждой стороны и несколькими посередине, которые можно переместить.

Пока почти все работает, у меня есть одна небольшая проблема:

Я буду использовать color:red; в некоторых TD. Для примера я сделал их всех красными. Если вы попытаетесь сравнить красный текст в столбце-липучке и красный текст в столбце-липучке, вы увидите, что они разные. Как я могу это исправить? 

#MyTable {
  background-color: #333333;
  overflow-x: auto;
  white-space: nowrap;
  margin-left: 0px;
  color: red;
}

#MyTable>thead>tr>th,
#MyTable>tbody>tr>td {
  min-width: 150px;
  max-width: 150px;
}

#MyTable>thead>tr>th:nth-child(1),
#MyTable>tbody>tr>td:nth-child(1) {
  color: red;
  position: sticky;
  left: 0;
  background-color: #333333;
}

#MyTable>thead>tr>th:nth-child(2),
#MyTable>tbody>tr>td:nth-child(2) {
  color: red;
  position: sticky;
  left: 150px;
  background-color: #333333;
}

#MyTable>thead>tr>th:nth-last-child(1),
#MyTable>tbody>tr>td:nth-last-child(1) {
  color: red;
  position: sticky;
  right: 0;
  background-color: #333333;
}

#MyTable>thead>tr>th:nth-last-child(2),
#MyTable>tbody>tr>td:nth-last-child(2) {
  color: red;
  position: sticky;
  right: 150px;
  background-color: #333333;
}

body {
  margin: 0px;
}
<table id="MyTable">
  <thead>
    <tr>
      <th>Col 1 Sticky</th>
      <th>Col 2 Sticky</th>
      <th>Col 3 Normal</th>
      <th>Col 4 Normal</th>
      <th>Col 5 Normal</th>
      <th>Col 6 Normal</th>
      <th>Col 7 Sticky</th>
      <th>Col 8 Sticky</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
    </tr>
    <tr>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
    </tr>
    <tr>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
      <td>Test Data</td>
    </tr>
  </tbody>
</table>

Вот полный JSFiddle, показывающий проблему:

https://jsfiddle.net/6afueqgb/

As для решений - они должны работать только на Chrome 80+. * IE, поддержка Edge или FF не требуется, если это имеет значение.

...