Question

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

代码：

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

Answer 1

要将“打印”按钮对齐，请使用此

.table caption button{
    float:right;
}

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

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

HTML Bootstrap表标题（标题），左侧是标题，右侧是按钮

1 个答案: