Right fixed column table - background color of fixed column not working

Question

I need a table just like describred in Fixed right column table scales to responsive design But when I define a background color using css the rule doesn't apply to the fixed column

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

Thanks!

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

Are you talking about the ones with the class `.crud-links`? If so, just do a `tr .crud-links { background: something; }` - or are you talking about them not getting the same color as every other in the main part? Here's a fiddle with the first solution: https://jsfiddle.net/3ckvkr1f/4/ and if you want to make them the same, just remake it using the (odd)-selector, same as is done with the rest of the table. — junkfoodjunkie, Nov 10 '16 at 13:26
Thanks junkfoodjunkie this solved my problem. How can I vote for this answer? — jones_junior, Nov 10 '16 at 15:50

score 0 · Answer 1 · answered Nov 10 '16 at 14:40

0

Your css code refers to tbody tag, but You are missing it.

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

Correct yout html code, or change css like this:

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

answered Nov 10 '16 at 14:40

linearSpin

93
1
10

Thanks @linearspin the css is corrected, but the problem still happens. [link](https://jsfiddle.net/3ckvkr1f/5/) – jones_junior Nov 10 '16 at 15:40
now I see the point, but I can't figure out why does it not apply, it should work already. – linearSpin Nov 10 '16 at 18:03
'position: absolute' mess around here, without this it works. But have no idea why. – linearSpin Nov 10 '16 at 18:06

score 0 · Accepted Answer · answered Nov 10 '16 at 15:55

Are you talking about the ones with the class .crud-links? If so, just do tr .crud-links { background: something; }

If you're talking about them not getting the same color as every other in the main part, just do the same, but using tr .crud-links:nth-of-type(odd)

score 0 · Answer 3 · answered Jul 10 '19 at 06:14

/*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;
        }

Right fixed column table - background color of fixed column not working

3 Answers3