Website (Table) looks fine in Firefox but not Chrome/Edge - html

Question

Below is some of the code for my website. The table works perfectly on Firefox but when I open it in either Chrome or Edge it squishes the picture up, I'm not too sure what it is that's making it do this.
This is how it looks on Firefox:
This is how it looks on Chrome/Edge:
<div class="row">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "music";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM music_tbl";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
echo "<table class='table-hover mainTable' border='1'>";
while($row = mysqli_fetch_assoc($result)) {
echo "<tr><td><img width='80%' height='80%'src=/Music_Player/songimages/". $row['album_cover_url'].">" .
"</td><td>" . $row["track_name"] .
"</td><td>" . $row["singers"] .
"</td><td>" . $row["album_name"] .
"</td><td>" . $row["trackID"] .
"</td><td><img src=playButton.png class='playB'>
</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}
Below is my CSS:
.mainTable {
position: relative;
right: 20%;
margin:0 auto;
font-size: 99%;
text-align: center;
border: 1px solid #b3b3b3;
border-collapse: collapse;
max-width: 45%;
max-height: 100%;
font-family: verdana;
margin-bottom: -1px;
top: 200px;
}
tr, td {
border-collapse: collapse;
padding: 5px;
max-width: 650px;
}
.albums {
padding: 0px;
}