Issue
I would like to know how I can remove the underline at the end of the table? I find it ugly... I don't see how to remove this?
Here is the code below:
<!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>Thank you in advance for your help
Solution
If you don't want any border, you can set border:none.
The border you don't want is applied on td and th of the last tr element, so your selector is .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>Answered By - Cédric
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.