我用 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;
}
uj5u.com熱心網友回復：
您應該將此添加到您的 CSS 以洗掉行的邊框寬度：
.table-bordered>:not(caption)>* {
border-width: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/476378.html
上一篇：反應導航欄沒有全屏顯示
下一篇：如何去掉表格末尾的下劃線？