Jquery - HTML Bootstrap table title (caption) with title on left side and buttons on right side
<div class="table-responsive small"> <table class="table table-striped table-bordered table-hover table-condensed"> <caption style="border: inherit; background-color: lightgrey;"> <span class="align-left"><strong>Monthly Savings Report</strong></span> <button type="button" id="printBtn" class="btn btn-default btn-sm" title="Print"> <span class="glyphicon glyphicon-print"></span> </button> </caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </div>
a) How Can I align the title text 'Monthly Savings Report' to left and the Print button to right ?
b) Is there a way to style it better (using Bootstrap default style classes instead of
style="border: inherit; background-color: lightgrey;"?
Details of all the mentioned technology in the question that you should know about for a detailed information.