jones_junior jones_junior - 26 days ago 9
CSS Question

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

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

Answer

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)