如何去除table末尾的下划线？

Question

我想知道如何去掉 table 末尾的下划线？我觉得丑... 我不知道如何删除它？

下面是代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

提前感谢您的帮助

Answer 1

              <tr>
                <th style="width: 60%; border-bottom: none;">Valid until</th>
                <td style="min-width: 100%; border-bottom: none;">
                  01/01/2022
                </td>
              </tr>

Answer 2

该边框来自 table 的 tr，因此您可以添加：

   tr:last-child{
       border-bottom: none;
   }

我使用的是伪选择器“last-child”，因为如果没有它，所有 tr 的底部边框都是 0px

Answer 3

 <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/bootstrap@5.0.2/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>

Answer 4

如果不想要任何边框，可以设置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/bootstrap@5.0.2/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>

Answer 5

您可以使用 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/bootstrap@5.0.2/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>

如何去除table末尾的下划线？

How to remove the underline at the end of the table?

html

css

bootstrap-4

bootstrap-5