HTML Bootstrap 表格标题（标题），左侧有标题，右侧有按钮答案

【问题标题】：HTML Bootstrap table title (caption) with title on left side and buttons on right sideHTML Bootstrap 表格标题（标题），左侧有标题，右侧有按钮
【发布时间】：2014-03-18 17:14:41
【问题描述】：

我想建立一个带有标题栏的表格。标题栏必须有左侧的标题和右侧的一些按钮（我将添加 Javascript 支持）。我没有成功。

JS Fiddle link

代码：

<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) 如何将标题文本“每月储蓄报告”左对齐，打印按钮右对齐？

b) 有没有办法更好地设置样式（使用 Bootstrap 默认样式类而不是 style="border: inherit; background-color: lightgrey;"？

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

要将打印按钮向右对齐，请使用此

.table caption button{
    float:right;
}

要设置标题的样式，请删除内联样式并在样式表中添加以下内容

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

【讨论】：

工作正常。感谢您的帮助。