Published 04 Aug, 2022

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

Category Jquery
Modified : Nov 11, 2022
68

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

Answers

There are 1 suggested solutions here and each one has been listed below with a detailed description. The following topics have been covered briefly such as Javascript, Html, Css, Jquery, Twitter Bootstrap. These have been categorized in sections for a clear and precise explanation.

51

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

Associated Technologies

Details of all the mentioned technology in the question that you should know about for a detailed information.

Javascript

Javascript is the programming language of the web. It is client side scripting language that runs inside a browser. It's a lightweight, interpreted programming language and is very capable for network centric applications. One of the primary reasons for its popularity is also because it's fun and flexible.

Javascript is one of the core-technologies for the web alongside HTML and CSS. It is high level language with dynamic typing, first class functions and is termed as multi-paradigm as it supports event-driven, functional and imperative programming styles. It also has various APIs to work with text, dates, DOM etc.