在具有固定左列的表中，固定列不会派生父样式

Question

我正在尝试制作一个第一列固定的表，并且它有效。 （how do I create an HTML table with fixed/frozen left column and scrollable body?）

但是，即使其父节点存在，某些样式也不会应用于固定列。

例如，

.even {
  background-color: #c0c0c0;
}
.fixed-col {
  position: absolute;
  left: 0;
  width: 50px;
}
table {
  margin-left: 50px;
}

<div style="position:relative;">
  <div style="overflow-x:scroll">
    <table>
      <tr class="even">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr class="odd">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr class="even">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
    </table>
  </div>
</div>

它看起来像。

我想将固定列的背景颜色条纹化为其他列。 我该如何解决这个问题？

Answer 1

您可以更新选择器以自行选择td。

绝对或固定的定位元素不再在流中，tr只会包裹流中剩余的td。

在表格中添加了边框，tr不会在其外面绘制。

＆＃13;

＆＃13;

<div style="position:relative;">
  <div style="overflow-x:scroll">
    <table>
      <tr class="even">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr class="odd">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
      <tr class="even">
        <td class="fixed-col">a</td>
        <td>b</td>
        <td>c</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于您的even课程只是添加背景颜色，为什么不在固定单元格和父级上使用它？

<tr class="even">
    <td class="fixed-col even">a</td>
    <td>b</td>
    <td>c</td>
</tr>