I want to build a table with a title bar. The title bar has to have the title on the left side and some buttons (that I´ll add Javascript support) on right side. I´m not succeeding.

JS Fiddle link

Code:

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

Questions:

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;?