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