Adjusting font awesome icon height in td
Question
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.
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.
1 answers
solution1
1 ACCPTED 2019-09-30 06:50:19
make some changes in your code for class lists and make one css to align table content vertical.
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.
and also use bootstrap-4 classes to set btn design.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.