Форматирование заголовков таблицы тимьяна, выравнивание по вертикали

Question

Не удается правильно отформатировать заголовки тимьяна. - Первая проблема связана с текстом в вертикальных заголовках. Я установил его как «средний», но он не работает. - Вторая проблема с размещением двух кнопок в одном ряду рядом друг с другом

Точность прикрепления ss. Не могли бы вы взглянуть?

  <table class="table table-md table-bordered">
        <tr style="text-align: center; vertical-align: middle">
            <th scope="col">No</th>
            <th scope="col">Sales price</th>
            <th scope="col">Down Payment</th>
            <th scope="col">Length of employment</th>
            <th scope="col">Monthly income</th>
            <th scope="col">Monthly commitment</th>
            <th scope="col">First name</th>
            <th scope="col">Last name</th>
            <th scope="col">Phone number</th>
            <th scope="col">Status</th>
            <th scope="col">Activity</th>
        </tr>

        <tbody>
        <tr th:each="tempLoan : ${loans}">
            <td th:text="${tempLoan.id}"/>
            <td th:text="${tempLoan.salesPrice}"/>
            <td th:text="${tempLoan.downPayment}"/>
            <td th:text="${tempLoan.lengthOfEmployment}"/>
            <td th:text="${tempLoan.monthlyIncome}"/>
            <td th:text="${tempLoan.monthlyCommitment}"/>
            <td th:text="${tempLoan.firstName}"/>
            <td th:text="${tempLoan.lastName}"/>
            <td th:text="${tempLoan.phoneNumber}"/>
            <td th:text="${tempLoan.status}"/>
            <td>
                <div sec:authorize="hasAnyRole('ROLE_EMPLOYEE', 'ROLE_MANAGER')">
                    <a th:href="@{/loans/confirm-form(loanId=${tempLoan.id})}"
                       class="btn btn-info btn-sm">
                        Update
                    </a>
                </div>
                <div sec:authorize="hasRole('MANAGER')">
                    <a th:href="@{/loans/delete(loanId=${tempLoan.id})}"
                       class="btn btn-danger btn-sm">
                        Delete
                    </a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

Answer 1

Ваша середина вертикального выравнивания добавлена ​​не к тому элементу. Попробуйте нацелиться на th, например, так:

.table tr th {
  vertical-align: middle;
}

Fiddle:

.table tr th {
  vertical-align: middle;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-md table-bordered">
  <tr style="text-align: center; vertical-align: middle">
    <th scope="col">No</th>
    <th scope="col">Sales price</th>
    <th scope="col">Down Payment</th>
    <th scope="col">Length of employment</th>
    <th scope="col">Monthly income</th>
    <th scope="col">Monthly commitment</th>
    <th scope="col">First name</th>
    <th scope="col">Last name</th>
    <th scope="col">Phone number</th>
    <th scope="col">Status</th>
    <th scope="col">Activity</th>
  </tr>

  <tbody>
    <tr th:each="tempLoan : ${loans}">
      <td th:text="${tempLoan.id}" />
      <td th:text="${tempLoan.salesPrice}" />
      <td th:text="${tempLoan.downPayment}" />
      <td th:text="${tempLoan.lengthOfEmployment}" />
      <td th:text="${tempLoan.monthlyIncome}" />
      <td th:text="${tempLoan.monthlyCommitment}" />
      <td th:text="${tempLoan.firstName}" />
      <td th:text="${tempLoan.lastName}" />
      <td th:text="${tempLoan.phoneNumber}" />
      <td th:text="${tempLoan.status}" />
      <td>
        <div sec:authorize="hasAnyRole('ROLE_EMPLOYEE', 'ROLE_MANAGER')">
          <a th:href="@{/loans/confirm-form(loanId=${tempLoan.id})}" class="btn btn-info btn-sm">
                        Update
                    </a>
        </div>
        <div sec:authorize="hasRole('MANAGER')">
          <a th:href="@{/loans/delete(loanId=${tempLoan.id})}" class="btn btn-danger btn-sm">
                        Delete
                    </a>
        </div>
      </td>
    </tr>
  </tbody>
</table>