Как убрать подчеркивание в конце таблицы?

Я хотел бы знать, как я могу удалить подчеркивание в конце таблицы? я нахожу это некрасивым... Я не вижу, как это удалить?

Вот код ниже:

<!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>

Заранее спасибо за вашу помощь

html css bootstrap-4 bootstrap-5

17.05.2022 10:53

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Введение в технологический стек Twitch

В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:

8 полезных HTML-тегов, которые лучше использовать вместо <div>

Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...

HTML5: API локального хранилища (Local Storage)

LocalStorage - это простой способ хранения данных в браузере пользователя.

Доступность HTML - программирование с инклюзивной перспективой

Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

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

Вы можете добавить стиль CSS к th и td => border-bottom: none;

— 17.05.2022 11:03

если в таблице более 1 строки, все нижние границы td будут иметь 0 пикселей, и я думаю, что это не желаемый результат

— 17.05.2022 11:07

Если вы хотите добавить больше информации в свой ответ, я предлагаю вам отредактировать его вместо добавления комментариев.

— 17.05.2022 11:17

В данном конкретном примере все стили написаны внутри html

— 17.05.2022 11:17

17.05.2022 11:01

Эта граница пришла из tr таблицы, поэтому вы можете добавить:

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

я использую псевдоселектор «last-child», потому что без него все tr будут иметь нижнюю границу 0px

17.05.2022 11:04

 <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>

17.05.2022 11:11

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

Если вам не нужна граница, вы можете установить border:none. Граница, которую вы не хотите, применяется к td и th последнего элемента tr, поэтому ваш селектор .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>

17.05.2022 11:13

Вы можете использовать теги 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>

17.05.2022 11:21

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

Можно ли использовать две панели навигации в html?

Как изменить текстовое содержимое нескольких HTML-тегов с помощью JavaScript?

Утилита Material UI styled () — как рекурсивно изменить цвет фона выделенного текста

Выровняйте гибкий элемент по горизонтали с другим внешним контейнером <span>

Как выровнять виджет по центру экрана

Столбцы равной высоты или высота столбца будут основываться на самом длинном столбце среди них.

Текст заполнителя ввода не отображается в адаптивном режиме в поле поиска WordPress

Как показать другой элемент при наведении в Angular?

Как сделать формы встроенными

Создание задачи в стиле Github. Макет записи/предварительного просмотра.

Как убрать подчеркивание в конце таблицы?

Ответы 5

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

Похожие вопросы