HTML Bootstrap table title (caption) with title on left side and buttons on right side

Question

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

Solution

To align the Print button to the right use this

.table caption button{
    float:right;
}

To style the caption remove the inline styling and add the below in your stylesheet

.table caption{
    border: inherit; 
    background-color: lightgrey;
}

Comments

[Mendes]

Worked fine. Thanks for help.