网站（表格）在Firefox中看起来不错，但不适用于Chrome / Edge

Question

以下是我网站的部分代码。该表在Firefox上完美运行，但是当我在Chrome或Edge中打开它时，它会重新拍摄照片，我不太确定这是做什么的。

这就是它在Firefox上的表现：

这就是它在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><a href=index.php?trackID=". $row["trackID"] ."><img src=playButton.png class='playB'></a>
     </td></tr>";
     }
    echo "</table>";             
} else {
    echo "0 results";
}

以下是我的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;
    }