html - 在具有粘性列的表上保留交替行阴影

Question

我已经实现了一个带有粘性列的表格，其中包含以下 CSS:

tr {
    display: flex;
    height: 56px;
    background: white;
    &:nth-of-type(even) {
        background: rgba(0, 0, 0, 0.06);
    }
}
tr>td:first-of-type {
    position: sticky;
    left: 0;
    top: 0;
    min-width: 244px;
    max-width: 244px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.24);
}

这给了我交替的行阴影:

但是当水平滚动时，内容会渗透到第一个棒状列中:

如果我在我的 first-of-type 规则上显式设置背景颜色，那么我不会得到这种行为，例如

tr>td:first-of-type {
  position: sticky;
  left: 0;
  top: 0;
  background: white;
  min-width: 244px;
  max-width: 244px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.24);
}

但我想按照我的 tr 规则保留交替的行阴影。我想知道我是否可以将 nth-of-type 与我的 first-of-type 规则结合起来，例如

tr>td:first-of-type {
      position: sticky;
      left: 0;
      top: 0;
      background: white;
      min-width: 244px;
      max-width: 244px;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.24);
      &:nth-of-type(even) {
        background: rgba(0, 0, 0, 0.06);
      }
    }

这行不通，我可能误解了什么!这里的解决方案是什么？

谢谢

Answer 1

我已经为你试过了。

Method 1

• 已申请 background: white;到粘性列(即 tr>td:first-of-type )
• 然后申请了style="background:#dddddd"到 tr>td:first-of-type 的偶数列.

就是这样。 :)

body {
    margin:0;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ababab;
    text-align: left;
    padding: 8px;
    width:150px;
}

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

tr>td:first-of-type {
      position: sticky;
      left: 0;
      top: 0;
      background: white;
      min-width: 244px;
      max-width: 244px;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.24);
}

<table>
  <tr>
    <td>Company</td>
    <td>Contact</td>
    <td>Country</td>
    <td>Contact</td>
    <td>Country</td>
    <td>Country</td>
    <td>Contact</td>
    <td>Country</td>
  </tr>
  <tr>
    <td style="background:#dddddd">Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Maria Anders</td>
  </tr>
  <tr>
    <td style="background:#dddddd">Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>Maria Anders</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>Maria Anders</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td style="background:#dddddd">Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Canada</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>Maria Anders</td>
  </tr>
</table>

Method 2

• 我已将表格放入<div class="scroll">并应用滚动到它而不是应用于表。
• 然后将整个 div 放入另一个 div，即 <div class="wrapper">在这里申请 position:relative
• 已申请 position:absolute而不是 position:sticky至 tr>td:first-of-type
• 对于备用背景颜色，我应用了内联 style="background:#dddddd"到 tr>td:first-of-type 的列.
• 其余部分在下面的代码段中。

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    
}
.wrapper {
    position: relative;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    width:100px;    
    height:50px;    
    box-sizing:border-box;
}


tr {
    display: flex;
    background: white; 
}

tr>td:first-of-type {
    position: absolute;
    left: 0;
    top: auto;
    min-width: 244px;
    max-width: 244px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.24);
}

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

.scroll {
    margin-left: 244px;
    overflow-x: scroll;
    padding-bottom: 5px;
    width: 200px;
}

<div class="wrapper">
<div class="scroll">
<table>
  <tr>
    <td>Company</td>
    <td>Contact</td>
    <td>Country</td>
    <td>Country</td>
  </tr>
  <tr>
    <td style="background-color: #ababab;">Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td style="background-color: #ababab;">Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td style="background-color: #ababab;">Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>Germany</td>
  </tr>
</table>
</div>
</div>

希望这对您有所帮助:)