在 td 中調整字體真棒圖標高度
[英]Adjusting font awesome icon height in td
問題描述
我正在嘗試將字體真棒圖標添加到我的表格中，但它們會增加表格行的高度。 我嘗試設置 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 是內聯的，加號按鈕更小。
1 個解決方案
解決方案1
1 已采納 2019-09-30 06:50:19
對 class 列表的代碼進行一些更改，並制作一個 css 以垂直對齊表格內容。
我已經展示了您的 html 的行為，這是由於 Button 而我將 d-block class 應用到它的表工作正常。
並且還使用 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中垂直對齊字體真棒圖標
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.