I have created a table using HTML and CSS. The issue is that the background colors of the table display correctly on a desktop, but on a mobile phone, they appear completely transparent while the text remains visible.
I am using Bootstrap 4 for this website, and I have tried using the !important tag to override CSS styles, but the problem persists.
Here is the CSS code:
#beatsTable tr {
background-color:rgb(123, 126, 132, 1) !important;
padding:10px;
padding:10px;
}
#beatsTable tr:not(:nth-child(2)):hover {
background-color:rgb(55, 56, 58, 0.5);
}
#beatsTable td {
color:gray;
padding:10px;
color:white;
}
#beatsTable th {
padding:10px;
background-color:rgb(17, 17, 17, 0.5);
border-bottom:1px solid rgb(46, 204, 57, 0.5);
border-top:1px solid rgb(46, 204, 57, 0.5);
font-size:15px;
}
Here is the HTML code:
<table style="color:white" id="beatsTable">
<tr>
<div class="musicPlayerContainer">
</div>
</tr>
<tr>
<th>Title</th>
<th>Time</th>
<th>Bpm</th>
<th></th>
</tr>
<tr>
<td>Name1</td>
<td>3:12</td>
<td>120</td>
<td><div class="buyBtn" data-toggle="modal" data-target="#purchaseModal">Buy</div></td>
</tr>
<tr>
<td>Name2</td>
<td>4:20</td>
<td>153</td>
<td><div class="buyBtn" data-toggle="modal" data-target="#purchaseModal">Buy</div></td>
</tr>
<tr>
<td>Name3</td>
<td>6:09</td>
<td>100</td>
<td><div class="buyBtn" data-toggle="modal" data-target="#purchaseModal">Buy</div></td>
</tr>
</table>
View the table on desktop: http://prntscr.com/jtud8h
View the table on mobile: http://prntscr.com/jtudjt