For a while now, I've been struggling with a problem that I just can't seem to figure out. Here is a screenshot of the issue.
The main issue I'm facing is getting the background around the green content to appear dark while keeping the table headers visible above the dark background. Can anyone help me solve this? Below are the CSS styles:
.modalMenu {
display: block;
position: fixed;
z-index: 15;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-success-message-content {
background-color: rgba(0, 230, 0, 0.9);
margin: 15% auto;
padding: 10px;
border-radius: 5px;
width: 70%;
height: auto;
}
Below are the CSS styles for the framework being used for the table:
.sticky-table {
max-width: 100%;
max-height: 80vh;
overflow: auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 0!important
}
.sticky-table table {
margin-bottom: 0;
width: 100%;
max-width: 100%;
border-spacing: 0
}
.sticky-table table tr.sticky-row td, .sticky-table table tr.sticky-row th {
background-color: #fafafa;
border-top: 0;
position: relative;
outline: #ddd solid 1px;
z-index: 3
}
.sticky-table table td.sticky-cell, .sticky-table table th.sticky-cell {
background-color: #fafafa;
outline: #ddd solid 1px;
position: relative;
z-index: 3;
}
.sticky-table table tr.sticky-row td.sticky-cell, .sticky-table table tr.sticky-row th.sticky-cell {
z-index: 4
}
HTML Table
<div style="white-space: nowrap; height: 60vh;" class="sticky-table sticky-headers sticky-ltr-cells" id="divTableContainer">
<table class="table table-striped">
<thead>
<tr class="sticky-row">
<th class="sticky-cell"> </th>
</tr>
</thead>
</table>
</div>
HTML Modal
<div class="modalMenu">
<div class="modal-success-message-content"> <b>SUCCESS: </b>
<span id="modalSuccessMessageMsg"></span> </div>
</div>
Javascript for the Headers
jQuery(document).on('stickyTable', function() {
$(".sticky-headers").scroll(function() {
$(this).find("table tr.sticky-row th").css('top', $(this).scrollTop());
$(this).find("table tr.sticky-row td").css('top', $(this).scrollTop());
});
$(".sticky-ltr-cells").scroll(function() {
$(this).find("table th.sticky-cell").css('left', $(this).scrollLeft());
$(this).find("table td.sticky-cell").css('left', $(this).scrollLeft());
});
$(".sticky-rtl-cells").scroll(function() {
var maxScroll = $(this).find("table").prop("clientWidth") - $(this).prop("clientWidth");
$(this).find("table th.sticky-cell").css('right', maxScroll - $(this).scrollLeft());
$(this).find("table td.sticky-cell").css('right', maxScroll - $(this).scrollLeft());
});
});
$( document ).ready(function(){
$( document ).trigger( "stickyTable" );
});