I Create Scrollable table with Bootstrap . Scroll is working well, but under thead tag There are three black lines and i dont have idea for removing them please help me for fix this problem . this table for Persian language and i forced to sorted td tag like this if you have another way to fix that, i will so happy to help me .
html code :
<div dir="rtl">
<div >
<div >
<!-- Fixed header table-->
<div >
<table >
<thead>
<tr >
<th scope="col" > پرونده</th>
<th scope="col" >عملیات</th>
<th scope="col" >شماره ملی</th>
<th scope="col" >نام پدر</th>
<th scope="col" >خانوادگی</th>
<th scope="col" >نام</th>
<th scope="col" >عکس</th>
</tr>
</thead>
<tbody >
<tr>
<td > <button style="width:10.5rem ;">مشاهده پرونده ها </button></td>
<td style="padding: 10px 0;" ><a href="#" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" ></i></a>
<a href="#" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" ></i></a></td>
<td style="padding: 13px 4px;">9129990000</td>
<td style="padding: 13px 4px;">رستم</td>
<td style="padding: 13px 4px;"> اصلانی</td>
<td style="padding: 13px 4px;">آرش </td>
<td scope="row" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
</tr>
<tr>
<td > <button style="width:10.5rem ;">مشاهده پرونده ها </button></td>
<td style="padding: 10px 0;" ><a href="#" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" ></i></a>
<a href="#" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" ></i></a></td>
<td style="padding: 13px 4px;">9129990000</td>
<td style="padding: 13px 4px;">رستم</td>
<td style="padding: 13px 4px;"> اصلانی</td>
<td style="padding: 13px 4px;">آرش </td>
<td scope="row" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
</tr>
<tr>
<td > <button style="width:10.5rem ;">مشاهده پرونده ها </button></td>
<td style="padding: 10px 0;" ><a href="#" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" ></i></a>
<a href="#" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" ></i></a></td>
<td style="padding: 13px 4px;">9129990000</td>
<td style="padding: 13px 4px;">رستم</td>
<td style="padding: 13px 4px;"> اصلانی</td>
<td style="padding: 13px 4px;">آرش </td>
<td scope="row" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
</tr>
<tr>
<td > <button style="width:10.5rem ;">مشاهده پرونده ها </button></td>
<td style="padding: 10px 0;" ><a href="#" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" ></i></a>
<a href="#" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" ></i></a></td>
<td style="padding: 13px 4px;">9129990000</td>
<td style="padding: 13px 4px;">رستم</td>
<td style="padding: 13px 4px;"> اصلانی</td>
<td style="padding: 13px 4px;">آرش </td>
<td scope="row" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
</tr>
<tr>
<td > <button style="width:10.5rem ;">مشاهده پرونده ها </button></td>
<td style="padding: 10px 0;" ><a href="#" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" ></i></a>
<a href="#" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" ></i></a></td>
<td style="padding: 13px 4px;">9129990000</td>
<td style="padding: 13px 4px;">رستم</td>
<td style="padding: 13px 4px;"> اصلانی</td>
<td style="padding: 13px 4px;">آرش </td>
<td scope="row" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
</tr>
<tr>
<td > <button style="width:10.5rem ;">مشاهده پرونده ها </button></td>
<td style="padding: 10px 0;" ><a href="#" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" ></i></a>
<a href="#" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" ></i></a></td>
<td style="padding: 13px 4px;">9129990000</td>
<td style="padding: 13px 4px;">رستم</td>
<td style="padding: 13px 4px;"> اصلانی</td>
<td style="padding: 13px 4px;">آرش </td>
<td scope="row" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
</tr>
<tr>
<td > <button style="width:10.5rem ;">مشاهده پرونده ها </button></td>
<td style="padding: 10px 0;" ><a href="#" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" ></i></a>
<a href="#" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" ></i></a></td>
<td style="padding: 13px 4px;">9129990000</td>
<td style="padding: 13px 4px;">رستم</td>
<td style="padding: 13px 4px;"> اصلانی</td>
<td style="padding: 13px 4px;">آرش </td>
<td scope="row" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
</tr>
<tr>
<td > <button style="width:10.5rem ;">مشاهده پرونده ها </button></td>
<td style="padding: 10px 0;" ><a href="#" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" ></i></a>
<a href="#" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" ></i></a></td>
<td style="padding: 13px 4px;">9129990000</td>
<td style="padding: 13px 4px;">رستم</td>
<td style="padding: 13px 4px;"> اصلانی</td>
<td style="padding: 13px 4px;">آرش </td>
<td scope="row" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
</tr>
</tbody>
</table>
</div><!-- End -->
</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;
}
CodePudding user response：
You should add this to your CSS to remove the border width of rows :
.table-bordered>:not(caption)>* {
border-width: 0;
}