ลองแบบนี้ดูครับ
CSS
body {
background: #141414;
}
#Sequel {
width: 100%;
border-collapse: collapse;
background: #141414;
color: #fff;
text-align: left;
}
#Sequel a {
text-decoration: none;
color: #fff;
}
#Sequel tr {
border: 2px solid #848484;
}
#Sequel th,
#Sequel td {
height: 50px;
padding: 0 12px;
}
#Sequel tr.current {
background: #f00;
}
HTML
<table id="Sequel">
<thead>
<tr>
<th>ชื่อเรื่อง</th>
<th>ภาค</th>
<th>ปีที่เข้าฉาย</th>
<th>imdb</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="?a" rel="nofollow">Annabelle</a></td>
<td>1</td>
<td>2 October 2014</td>
<td>5.4</td>
</tr>
<tr>
<td><a href="?b" rel="nofollow">Annabelle: Creation</a></td>
<td>2</td>
<td>10 August 2017</td>
<td>6.5</td>
</tr>
<tr>
<td><a href="?c" rel="nofollow">Annabelle Comes Home</a></td>
<td>3</td>
<td>26 June 2019</td>
<td>6.0</td>
</tr>
</tbody>
</table>
JS
window.addEventListener('DOMContentLoaded', function(){
var cur = window.location.href;
var alinks = document.querySelectorAll("#Sequel a");
for ( var i=0; i<alinks.length; i++ ) {
var a = alinks[i];
if ( a == cur ) {
a.closest("tr").classList.add("current");
}
}
});
https://codepen.io/60ss/project/full/ZKaGVn