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

【问题标题】：Right fixed column table - background color of fixed column not working右固定列表 - 固定列的背景颜色不起作用
【发布时间】：2019-07-10 14:14:20
【问题描述】：

我需要一个像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;
}

【问题讨论】：

你说的是.crud-links类的人吗？如果是这样，只需执行tr .crud-links { background: something; } - 或者您是在谈论它们在主要部分中没有得到与其他颜色相同的颜色？这是第一个解决方案的一个小技巧：jsfiddle.net/3ckvkr1f/4，如果你想让它们相同，只需使用 (odd)-selector 重新制作它，与表的其余部分相同。
感谢 junkfoodjunkie 这解决了我的问题。我怎样才能为这个答案投票？
我会把它变成一个答案。

标签： html css

【解决方案1】：

你说的是 .crud-links 类的那些吗？如果是这样，就这样做 tr .crud-links { background: something; }

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

【讨论】：

【解决方案2】：

您的 css 代码引用了 tbody 标签，但您缺少它。

.table-striped > tbody > tr:nth-of-type(2n+1)

更正你的html代码，或者像这样改变css：

.table-striped  tr:nth-of-type(2n+1)

【讨论】：

感谢@linearspin，css 已更正，但问题仍然存在。 link
现在我明白了，但我不明白为什么它不适用，它应该已经工作了。
'position: absolute' 在这里乱七八糟，没有这个它可以工作。但不知道为什么。

【解决方案3】：

/*first three column class name as follow, */
/*tbody used for only tr td work otherwise table header also work with bgcolor*/
/*fixed column first three column hover color change*/
 tbody > tr:hover > .freez,  
tbody >tr:hover > .freez2, 
tbody> tr:hover > .freez3{
             background-color:#f5f5f5 !important;
        }

【讨论】：