我想知道如何洗掉表格末尾的下劃線？我覺得它很難看...我不知道如何洗掉它？
下面是代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Confirmation</h4>
<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<table class="table table-hover table-striped spaceLeft " style="width: 100%">
<tbody>
<tr>
<th>Purchase of </th>
<td style="min-width: 100%"> 5 Ittroises BE 34120185 </td>
</tr>
<tr>
<th style="width: 60%">Valid until</th>
<td style="min-width: 100%">01/01/2022 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="goBack()" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary" (click)="sendCancelOrderRequest()">Confirmer</button>
</div>
</div>
</body>
</html>預先感謝您的幫助
uj5u.com熱心網友回復：
如果你不想要任何邊框，你可以設定border:none. 您不想要的邊框應用于最后一個 tr 元素的 td 和 th ，因此您的選擇器是.table tr:last-child th, .table tr:last-child td
.table tr:last-child th,
.table tr:last-child td{
border:none;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table class="table table-hover table-striped spaceLeft " style="width: 100%">
<tbody>
<tr>
<th>Purchase of </th>
<td style="min-width: 100%"> 5 Ittroises BE 34120185 </td>
</tr>
<tr>
<th style="width: 60%">Valid until</th>
<td style="min-width: 100%">01/01/2022 </td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="goBack()" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary" (click)="sendCancelOrderRequest()">Confirmer</button>
</div>uj5u.com熱心網友回復：
<tr>
<th style="width: 60%; border-bottom: none;">Valid until</th>
<td style="min-width: 100%; border-bottom: none;">
01/01/2022
</td>
</tr>
uj5u.com熱心網友回復：
<style>
table > tbody > tr:last-child > * {
border-bottom-width: 0;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Confirmation</h4>
<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<table class="table table-hover table-striped spaceLeft " style="width: 100%">
<tbody>
<tr>
<th>Purchase of </th>
<td style="min-width: 100%"> 5 Ittroises BE 34120185 </td>
</tr>
<tr>
<th style="width: 60%">Valid until</th>
<td style="min-width: 100%">01/01/2022 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="goBack()" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary" (click)="sendCancelOrderRequest()">Confirmer</button>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
該邊框來自表格的 tr ，因此您可以添加：
tr:last-child{
border-bottom: none;
}
我使用偽選擇器“ last-child”，因為沒有它所有的 tr 都會有 0px 邊框底部
uj5u.com熱心網友回復：
您可以根據需要使用 CSS 或樣式標簽 - 下面的簡單示例
<html>
<head>
<title>HTML CSS JS</title>
</head>
<style>
tr.no-bottom-border td {border-bottom: none}
tr.no-bottom-border th {border-bottom: none}
</style>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Confirmation</h4>
<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<table class="table table-hover table-striped spaceLeft " style="width: 100%">
<tbody>
<tr>
<th>Purchase of </th>
<td style="min-width: 100%"> 5 Ittroises BE 34120185 </td>
</tr>
<tr class="no-bottom-border">
<th style="width: 60%">Valid until</th>
<td style="min-width: 100%">01/01/2022 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="goBack()" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary" (click)="sendCancelOrderRequest()">Confirmer</button>
</div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/476379.html