Настройка шрифта потрясающая высота иконки в тд - PullRequest
Новая
       30

Настройка шрифта потрясающая высота иконки в тд

0 голосов
/ 30 сентября 2019

Я пытаюсь добавить в таблицу значки шрифтов, но они увеличивают высоту строки таблицы. Я пытался установить высоту и ширину td, button и tr, но это не сработало. enter image description here

вот мой код 

        <div class='tab-pane fade show active' style="font-size:10em;" id="transactions" role="tabpanel" aria-labelledby="transactions-tab">
            <table style="width: 100%" class='table table-sm' id= 'transaction_table'>
                <tr class='thead-light'>
                    <th style="font-size: 10px;">Transaction name</th>
                    <th style="font-size: 10px;">Date</th>
                    <th style="font-size: 10px;">Amount</th>
                    <th></th>
                </tr>
                <tr style="width:100%;">
                    <td><input class="form-control form-control-sm" type="text"></td>
                    <td><input class="form-control form-control-sm" type="date"></td>
                    <td><input class="form-control form-control-sm" type="text">
                    </td>
                    <td style="text-align: center; width:20px; height:20px;"><button onclick="d(this)" class="fas fa-trash-alt fa-xs" style="font-size: 1.5vw;"></button></td>
                </tr>
        </table>
        <div>
            <button onclick="logd()" style="height:30px; width:30px;"><i class="far fa-plus-square fa-xs add_trans_button"></i></button>
        </div>

    </div>

Я бы хотел, чтобы tr был встроенным, а кнопка плюс - меньше.

1 Ответ

1 голос
/ 30 сентября 2019

внесите некоторые изменения в ваш код для списков классов и сделайте один CSS, чтобы выровнять содержимое таблицы по вертикали.

Я показал поведение вашего HTML-кода из-за кнопки, в то время как я применяю к нему класс d-blockтаблица работает должным образом.

, а также использует классы bootstrap-4 для настройки btn design.

покажите фрагмент для более полного понимания. 

.tab-pane .table-sm td, .tab-pane .table-sm th {
  vertical-align: middle;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class='tab-pane fade show active' style="font-size:10em;" id="transactions" role="tabpanel" aria-labelledby="transactions-tab">
    <table style="width: 100%" class='table table-sm' id= 'transaction_table'>
      <tr class='thead-light'>
        <th style="font-size: 10px;">Transaction name</th>
        <th style="font-size: 10px;">Date</th>
        <th style="font-size: 10px;">Amount</th>
        <th></th>
      </tr>
      <tr>
        <td><input class="form-control form-control-sm" type="text"></td>
        <td><input class="form-control form-control-sm" type="date"></td>
        <td><input class="form-control form-control-sm" type="text"></td>
        <td><button onclick="d(this)" class="btn btn-outline-dark d-block mx-auto"><i class="fas fa-trash-alt add_trans_button"></i></button></td>
      </tr>
    </table>
    <div>
      <button onclick="logd()" class="btn btn-outline-dark d-block"><i class="far fa-plus-square add_trans_button"></i></button>
    </div>
  </div>
</body>
</html>
...