bootstrap 的可滚动 table 在 css 中有问题

Question

我用 Bootstrap 创建可滚动 table 。 Scroll 运行良好，但在 thead 标签下有三条黑线，我不知道如何删除它们请帮我解决这个问题。这个 table 用于波斯语，我被迫像这样对 td 标签进行排序，如果你有其他方法来解决这个问题，我很乐意帮助我。

html代码：

<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 >
                                            <tr>
                                                <td class="col-2"> <button class="btn btn-success p-1" style="width:10.5rem ;">مشاهده پرونده ها </button></td>
                                                <td class="col-2" style="padding: 10px 0;" ><a href="#" class="editemember modal-trigger" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" class="bi bi-pen"></i></a>
                                                    <a href="#" ><i  data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" class="bi bi-folder-plus px-4"></i></a></td>
                                                    <td class="col-2" style="padding: 13px 4px;">9129990000</td>
                                                    <td class="col-2" style="padding: 13px 4px;">رستم</td>
                                                    <td class="col-2" style="padding: 13px 4px;"> اصلانی</td>
                                                    <td class="col-1" style="padding: 13px 4px;">آرش </td>
                                                    <td scope="row" class="col-1" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-2"> <button class="btn btn-success p-1" style="width:10.5rem ;">مشاهده پرونده ها </button></td>
                                                <td class="col-2" style="padding: 10px 0;" ><a href="#" class="editemember modal-trigger" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" class="bi bi-pen"></i></a>
                                                    <a href="#" ><i  data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" class="bi bi-folder-plus px-4"></i></a></td>
                                                    <td class="col-2" style="padding: 13px 4px;">9129990000</td>
                                                    <td class="col-2" style="padding: 13px 4px;">رستم</td>
                                                    <td class="col-2" style="padding: 13px 4px;"> اصلانی</td>
                                                    <td class="col-1" style="padding: 13px 4px;">آرش </td>
                                                    <td scope="row" class="col-1" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-2"> <button class="btn btn-success p-1" style="width:10.5rem ;">مشاهده پرونده ها </button></td>
                                                <td class="col-2" style="padding: 10px 0;" ><a href="#" class="editemember modal-trigger" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" class="bi bi-pen"></i></a>
                                                    <a href="#" ><i  data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" class="bi bi-folder-plus px-4"></i></a></td>
                                                    <td class="col-2" style="padding: 13px 4px;">9129990000</td>
                                                    <td class="col-2" style="padding: 13px 4px;">رستم</td>
                                                    <td class="col-2" style="padding: 13px 4px;"> اصلانی</td>
                                                    <td class="col-1" style="padding: 13px 4px;">آرش </td>
                                                    <td scope="row" class="col-1" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-2"> <button class="btn btn-success p-1" style="width:10.5rem ;">مشاهده پرونده ها </button></td>
                                                <td class="col-2" style="padding: 10px 0;" ><a href="#" class="editemember modal-trigger" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" class="bi bi-pen"></i></a>
                                                    <a href="#" ><i  data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" class="bi bi-folder-plus px-4"></i></a></td>
                                                    <td class="col-2" style="padding: 13px 4px;">9129990000</td>
                                                    <td class="col-2" style="padding: 13px 4px;">رستم</td>
                                                    <td class="col-2" style="padding: 13px 4px;"> اصلانی</td>
                                                    <td class="col-1" style="padding: 13px 4px;">آرش </td>
                                                    <td scope="row" class="col-1" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-2"> <button class="btn btn-success p-1" style="width:10.5rem ;">مشاهده پرونده ها </button></td>
                                                <td class="col-2" style="padding: 10px 0;" ><a href="#" class="editemember modal-trigger" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" class="bi bi-pen"></i></a>
                                                    <a href="#" ><i  data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" class="bi bi-folder-plus px-4"></i></a></td>
                                                    <td class="col-2" style="padding: 13px 4px;">9129990000</td>
                                                    <td class="col-2" style="padding: 13px 4px;">رستم</td>
                                                    <td class="col-2" style="padding: 13px 4px;"> اصلانی</td>
                                                    <td class="col-1" style="padding: 13px 4px;">آرش </td>
                                                    <td scope="row" class="col-1" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-2"> <button class="btn btn-success p-1" style="width:10.5rem ;">مشاهده پرونده ها </button></td>
                                                <td class="col-2" style="padding: 10px 0;" ><a href="#" class="editemember modal-trigger" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" class="bi bi-pen"></i></a>
                                                    <a href="#" ><i  data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" class="bi bi-folder-plus px-4"></i></a></td>
                                                    <td class="col-2" style="padding: 13px 4px;">9129990000</td>
                                                    <td class="col-2" style="padding: 13px 4px;">رستم</td>
                                                    <td class="col-2" style="padding: 13px 4px;"> اصلانی</td>
                                                    <td class="col-1" style="padding: 13px 4px;">آرش </td>
                                                    <td scope="row" class="col-1" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-2"> <button class="btn btn-success p-1" style="width:10.5rem ;">مشاهده پرونده ها </button></td>
                                                <td class="col-2" style="padding: 10px 0;" ><a href="#" class="editemember modal-trigger" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" class="bi bi-pen"></i></a>
                                                    <a href="#" ><i  data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" class="bi bi-folder-plus px-4"></i></a></td>
                                                    <td class="col-2" style="padding: 13px 4px;">9129990000</td>
                                                    <td class="col-2" style="padding: 13px 4px;">رستم</td>
                                                    <td class="col-2" style="padding: 13px 4px;"> اصلانی</td>
                                                    <td class="col-1" style="padding: 13px 4px;">آرش </td>
                                                    <td scope="row" class="col-1" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-2"> <button class="btn btn-success p-1" style="width:10.5rem ;">مشاهده پرونده ها </button></td>
                                                <td class="col-2" style="padding: 10px 0;" ><a href="#" class="editemember modal-trigger" data-modal="modal-name" ><i data-bs-toggle="tooltip" data-bs-placement="top" title="ویرایش" class="bi bi-pen"></i></a>
                                                    <a href="#" ><i  data-bs-toggle="tooltip" data-bs-placement="top" title="ایجاد پرونده" class="bi bi-folder-plus px-4"></i></a></td>
                                                    <td class="col-2" style="padding: 13px 4px;">9129990000</td>
                                                    <td class="col-2" style="padding: 13px 4px;">رستم</td>
                                                    <td class="col-2" style="padding: 13px 4px;"> اصلانی</td>
                                                    <td class="col-1" style="padding: 13px 4px;">آرش </td>
                                                    <td scope="row" class="col-1" style="padding: 13px 4px;"><img src="" alt="عکس"></td>
                                            </tr>
                                           
                                            
                                        </tbody>
                                    </table>
                                </div><!-- End -->
                                
                            </div>
                        </div>
                    </div>

css代码：

.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;
}

Answer 1

您应该将此添加到您的 CSS 以删除行的边框宽度：

.table-bordered>:not(caption)>* {
       border-width: 0;
  }

bootstrap 的可滚动 table 在 css 中有问题

scrollable table with bootstrap have problem in css

html

css

bootstrap-4