在 td 中调整字体真棒图标高度
[英]Adjusting font awesome icon height in td
问题描述
I'm trying to add font awesome icons to my table but they increase the height of the table row.
我正在尝试将字体真棒图标添加到我的表格中，但它们会增加表格行的高度。 I've tried to set the height and width of the td, button and tr but it hasn't worked.我尝试设置 td、button 和 tr 的高度和宽度，但没有成功。
here's my code这是我的代码
<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>
I'd like the tr to be inline and the plus button to be smaller.我希望 tr 是内联的，加号按钮更小。
1 个解决方案
解决方案1
1 已采纳 2019-09-30 06:50:19
make some changes in your code for class lists and make one css to align table content vertical.对 class 列表的代码进行一些更改，并制作一个 css 以垂直对齐表格内容。
i have show the behavior of your html that is because of Button while i apply d-block class to it the table works properly.我已经展示了您的 html 的行为，这是由于 Button 而我将 d-block class 应用到它的表工作正常。
and also use bootstrap-4 classes to set btn design.并且还使用 bootstrap-4 类来设置 btn 设计。
show snippet for the more understanding.显示片段以获得更多理解。
.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.