I have been attempting to apply a specific style to a table within a Bootstrap Modal, but I am encountering issues with highlighting the column and row. Oddly enough, when I include the table in the body of an HTML file, it functions correctly. Can anyone provide some insight into what might be causing this problem?
Style.css
.custom-table-matrix-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
}
.custom-table-matrix-table thead th {
font-size: 12px;
background: #000000;
color: #ffffff;
text-align: center;
}
.custom-table-matrix-table tbody td {
border: solid 1px #DDEEEE;
color: #ffffff;
padding: 10px;
}
.custom-table-matrix-highlight {
overflow: hidden;
z-index: 1;
}
.custom-table-matrix-highlight tbody td, .custom-table-matrix-highlight thead th {
position: relative;
}
.custom-table-matrix-highlight tbody td:hover::before {
background-color: #CCE7E7!important;
content:'\00a0'!important;
height: 100%!important;
left: -5000px!important;
position: absolute!important;
top: 0!important;
width: 10000px!important;
z-index: -1!important;
}
.custom-table-matrix-highlight tbody td:hover::after {
background-color: #CCE7E7!important;
content:'\00a0'!important;
height: 10000px!important;
left: 0!important;
position: absolute!important;
top: -5000px!important;
width: 100%!important;
z-index: -1!important;
}
Modal code section
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<table class="custom-table-matrix-highlight custom-table-matrix-table">
<thead>
<tr>
<th>Week1</th>
<th>Week1</th>
<th>Week1</th>
<th>Week1</th>
</tr>
</thead>
<tbody>
<tr>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
</tr>
<tr>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
</tr>
<tr>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
</tr>
<tr>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
</tr>
<tr>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
<td>25.00$</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>