I have created a scrollable table using Bootstrap. The scrolling functionality works perfectly, but I am facing an issue with three black lines appearing under the thead tag. I am unsure how to remove them. If you have any suggestions on how to fix this problem, I would greatly appreciate your help.
This table is designed for Persian language, and I have sorted the td tags in a specific way. If there is a better way to achieve the desired outcome, I would be thrilled to receive assistance.
HTML code:
<div class="container py-5" dir="rtl">
<div class="row">
<div class="col-lg-12 mx-auto bg-white rounded shadow">
<!-- Fixed header table-->
<div class="table-responsive">
<table class="table table-fixed table-bordered table-hover table-striped">
<thead>
<tr class="bg-light table-success">
<th scope="col" class="col-2"> پرونده</th>
<th scope="col" class="col-2">عملیات</th>
<th scope="col" class="col-2">شماره ملی</th>
<th scope="col" class="col-2">نام پدر</th>
<th scope="col" class="col-2">خانوادگی</th>
<th scope="col" class="col-1">نام</th>
<th scope="col" class="col-1">عکس</th>
</tr>
</thead>
<tbody >
// Table body content here...
</tbody>
</table>
</div>
</div>
</div>
</div>
CSS code:
.table-fixed tbody {
height: 300px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed tbody th,
.table-fixed thead > tr > th {
float: left;
position: relative;
}
.table-fixed tbody td::after {
content: "";
clear: both;
display: block;
}
.table-fixed tbody th::after {
content: "";
clear: both;
display: block;
}
.table-fixed thead > tr > th ::after {
content: "";
clear: both;
display: block;
}