Прокручиваемая таблица с бутстрапом имеет проблему в css

Я создаю прокручиваемую таблицу с помощью Bootstrap. Прокрутка работает хорошо, но под тегом объявления есть три черные линии, и я не знаю, как их удалить, пожалуйста, помогите мне решить эту проблему. эта таблица для персидского языка, и я заставил отсортировать тег 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;
}

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны добавить это в свой CSS, чтобы удалить ширину границы строк:

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

Другие вопросы по теме