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


i need table describred in fixed right column table scales responsive design when define background color using css rule doesn't apply 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 talking ones class .crud-links? if so, tr .crud-links { background: something; }

if you're talking them not getting same color every other in main part, same, using tr .crud-links:nth-of-type(odd)


Comments

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -