html - 右固定列表 - 固定列的背景颜色不起作用

Question

我需要一个表格，就像 Fixed right column table scales to responsive design 中描述的那样但是当我使用 css 定义背景颜色时，规则不适用于固定列

Jsfiddle:https://jsfiddle.net/3ckvkr1f/2/

谢谢!

HTML

<div class="table-responsive">
  <table  class="table-striped" cellpadding="9">
    <thead>
      <tr>
        <th>
          col1
        </th>
        <th>
          col2
        </th>
        <th class="crud-links"> Options</th>
      </tr>
    </thead>
    <tr>
      <td>
        R1col1 alçkfjalçkfjalkjflaksjflaksj
      </td>
      <td>
        R1col2 aslkfjasklçfjaklçfjasklfjasçklfjas
      </td>
      <td class="crud-links">
        x
      </td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">
        R2col1 alçkfjalçkfjalkjflaksjflaksj slkfjsçklafjaslfkjsldk
      </td>
      <td style="white-space: nowrap;">
        R2col2 aslkfjasklçfjaklçfjasklfjasçklfjas
      </td>
      <td class="crud-links">
        x
      </td>
    </tr>
     <tr>
      <td style="white-space: nowrap;">
        R3col1 alçkfjalçkfjalkjflaksjflaksj slkfjsçklafjaslfkjsldk
      </td>
      <td style="white-space: nowrap;">
        R3col2 aslkfjasklçfjaklçfjasklfjasçklfjas
      </td>
      <td class="crud-links">
        x
      </td>
    </tr>
   </table>

</div>

CSS:

.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: blue;
}
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eeeeee;
}
    .table-hover th, .table-hover td {
        padding: 9px;
    }
    .table-responsive {
        width: inherit;
        max-width: 80%;
        margin-bottom: 15px;
        overflow-x:  scroll;
        overflow-y: hidden;
        border: 0;        
    }

    .crud-links{
        position: absolute;
        overflow:hidden;
        width: 91px;
        right: 0;       
    }


.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: blue;
}

Answer 1

您是在谈论带有 .crud-links 类的那些吗？如果是这样，就这样做tr .crud-links { 背景:某物； }

如果您说的是它们在主要部分中没有获得与其他颜色相同的颜色，只需执行相同的操作，但使用 tr .crud-links:nth-of-type(odd)