在 td 中调整字体真棒图标高度

Question

我正在尝试向我的 table 添加很棒的字体图标，但它们增加了 table 行的高度。我尝试设置 td、button 和 tr 的高度和宽度，但没有成功。

这是我的代码

        <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 是内联的，加号按钮更小。

Answer 1

对 class 列表的代码进行一些更改，并制作一个 css 以垂直对齐 table 内容。

我已经展示了你的 html 的行为，这是因为 Button 当我应用 d-block class 时 table 正常工作。

并使用 bootstrap-4 classes 来设置 btn 设计。

显示片段以加深理解。

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

在 td 中调整字体真棒图标高度

Adjusting font awesome icon height in td

html

twitter-bootstrap

font-awesome