0

I'm trying to add a shadow to the edges of my tables when they are too large for their parent container (Horizontal Overflow).

I want to keep the background color when hovering a row but I am unable to keep the shadow while adding a background color to the row.

What is the proper way to do it?

Here is a reproduction of my issue:

.table-shadow-edges > .table {
    background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, white 30%, rgba(255, 255, 255, 0)) 100% 0;
    background-size: 50px 100%;
    background-repeat: no-repeat;
    max-width: none;
    margin-bottom: 0;
}

.table-responsive .bootgrid-table {
    table-layout: inherit!important;
}

.table-responsive {
    border: 0;
    width: 300px !important; /* For Demo Purpose */
}

.table-shadow-edges {
    background-size: 10px 100%;
    background: radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 100% 0;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 10px 100%;
}

.table-responsive {
    min-height: 0.01%;
    overflow-x: auto;
    border: 0;
}

table.bootgrid-table thead tr {
    border-bottom: solid 1px #3c7eca !important;
    border-top: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.04)!important ; 
}

.table tbody tr:hover {
    cursor: pointer;
    background: #dce8f6 !important;
    color: #3C7ECA;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-responsive table-shadow-edges">
   <table id="authorities-table" class="table table-striped bootgrid-table">
      <thead>
         <tr>
            <th ><a href="javascript:void(0);" class="column-header-anchor sortable"><span class="text">
               Name
               </span><span class="md icon"></span></a>
            </th>
            <th data-column-id="companies" class="text-left" style=""><a href="javascript:void(0);" class="column-header-anchor sortable"><span class="text">
               # Company
               </span><span class="md icon md-expand-less"></span></a>
            </th>
            <th data-column-id="users" class="text-left" style=""><a href="javascript:void(0);" class="column-header-anchor sortable"><span class="text">
               # User
               </span><span class="md icon"></span></a>
            </th>
            <th data-column-id="devices" class="text-left" style=""><a href="javascript:void(0);" class="column-header-anchor "><span class="text">
               # Devices
               </span><span class="md icon"></span></a>
            </th>
            <th data-column-id="deviceLists" class="text-left" style=""><a href="javascript:void(0);" class="column-header-anchor "><span class="text">
               # Device Lists
               </span><span class="md icon"></span></a>
            </th>
            <th data-column-id="enabled" class="text-left" style=""><a href="javascript:void(0);" class="column-header-anchor sortable"><span class="text">
               enabled
               </span><span class="md icon"></span></a>
            </th>
            <th data-column-id="commands" class="text-center" style=""><a href="javascript:void(0);" class="column-header-anchor "><span class="text">
               COMMANDS
               </span><span class="md icon"></span></a>
            </th>
         </tr>
      </thead>
      <tbody>
 <tr data-row-id="3">
            <td class="text-left" style="">Company3</td>
            <td class="text-left" style="">211</td>
            <td class="text-left" style="">466</td>
            <td class="text-left" style="">2047</td>
            <td class="text-left" style="">70</td>
            <td class="text-left" style=""><i class="glyphicon glyphicon-ok c-green"></i></td>
            <td class="text-center" style=""><button type="button" class="btn btn-xs btn-default m-r-10 authority-edit" data-id="1"><i class="md md-edit m-r-0"></i></button></td>
         </tr>
 <tr data-row-id="2">
            <td class="text-left" style="">Company3</td>
            <td class="text-left" style="">211</td>
            <td class="text-left" style="">466</td>
            <td class="text-left" style="">2047</td>
            <td class="text-left" style="">70</td>
            <td class="text-left" style=""><i class="glyphicon glyphicon-ok c-green"></i></td>
            <td class="text-center" style=""><button type="button" class="btn btn-xs btn-default m-r-10 authority-edit" data-id="1"><i class="md md-edit m-r-0"></i></button></td>
         </tr>
         <tr data-row-id="1">
            <td class="text-left" style="">Company3</td>
            <td class="text-left" style="">211</td>
            <td class="text-left" style="">466</td>
            <td class="text-left" style="">2047</td>
            <td class="text-left" style="">70</td>
            <td class="text-left" style=""><i class="glyphicon glyphicon-ok c-green"></i></td>
            <td class="text-center" style=""><button type="button" class="btn btn-xs btn-default m-r-10 authority-edit" data-id="1"><i class="md md-edit m-r-0"></i></button></td>
         </tr>
      </tbody>
   </table>
</div>

And here a screenshot of my UI issue : Screenshot of the visual issue

2
  • you can try giving the background-color with opacity that should solve the problem (background: #dce8f6 !important; ==> rgba(x,x,x,0.1)). Inbetween you don't have to write !important everywhere, Its a bad practice just write the rule specific enough
    – karthick
    Feb 5, 2018 at 21:31
  • I will test this. The !important are not on my code base but was needed to overwrite the values from the Bootstrap CDN used in the SO editor. Feb 5, 2018 at 22:13

1 Answer 1

0

Add a background-color with opacity on your selected rows.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.