Кастомизировать css-стиль для таблицы

Question

Пишу веб-программу по учету клиентов. Использую готовый css-стиль. В целом таблица выглядит привлекательно, но мне бы хотелось уменьшить высоту строк, приравняв ее к высоте первой строки. Может кто-нибудь подсказать как кастомизировать готовый css-стиль?

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Клиенты</title>

    <link rel="stylesheet"
          type="text/css"
          href="https://cdn.datatables.net/v/bs4/dt-1.10.25/datatables.min.css" />
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
          crossorigin="anonymous" />
</head>

<body>

<div class="container">

    <h3>Клиенты</h3>

    <hr/>
    <a th:href="@{/clients/create}" class="btn btn-primary">+клиент</a>
    <br/><br/>
    <table class="table table-bordered table-striped" id="clientsTable" >

        <thead>
        <tr>
            <th > No </th>
            <th>Имя</th>
            <th>Телефон</th>
            <th>Статус</th>
            <th>Комментарий</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${clients.empty}">
            <td colspan="6"> Пока нет ни одного клиента</td>
        </tr>
        <tr th:each="client: ${clients}">
            <td> <div class="numColumn">  </div></td>
            <td th:text="${client.name}"></td>
            <td th:text="${client.generalNum}? ${client.generalNum}: ' '"></td>
            <td th:text="${client.clientStatus}"></td>
            <td th:text="${client.comment}"></td>
            <td>
<!--                <a th:href="@{/showUpdateForm(clientId=${client.id})}" class="btn btn-info">Обновить</a>-->
                <form method="POST" th:action="@{/clients/delete(id=${client.id})}">
                    <button type="submit" name="submit" value="value" class="btn btn-danger ml-2">Удалить</button>
                </form>
            </td>
        </tr>
        </tbody>

    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.25/datatables.min.js"></script>
<script>

       $(document).ready(function() {
           $("#clientsTable").DataTable({
                   'aoColumnDefs': [{
                   'bSortable': false,
                   'aTargets': [-1] /* 1st one, start by the right */
               }]
           });
           var numColumns = $("div.numColumn");
for(i=0;i<numColumns.length;i++)
 numColumns[i].innerHTML = i+1;
       })

$(".deleteMe").on("click", function(){
   $(this).closest("li").remove();
});

</script>
</body>

</html>

БЛОГ НА HUSL

Кастомизировать css-стиль для таблицы

Ответы (0 шт):