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

你的css代码是指tbody标签，但是你错过了它。

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

纠正你的HTML代码，或改变这样的css：

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

Answer 2

你在谈论班级.crud-links吗？如果是这样，那就去做吧 tr .crud-links { background: something; }

如果你在谈论它们并没有在主要部分中获得与其他颜色相同的颜色，那么就这样做，但使用tr .crud-links:nth-of-type(odd)

Answer 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;
        }

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

3 个答案: