Question

我正在尝试在表格中添加超棒的字体图标，但它们会增加表格行的高度。我尝试设置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

在代码中对类列表进行一些更改，并进行一个CSS来垂直对齐表内容。

我已经显示了html的行为，这是因为Button，而我将d-block类应用于该表时，表仍正常工作。

，还使用bootstrap-4类设置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中调整字体真棒图标的高度

1 个答案: