CODEWITHSUNDEEP
htmlcsshtml-table
Alexander Solonik
Alexander Solonik

Reputation: 10230

How to add a footer to a table that is 100% width of the table?

I have a simple table which can be seen on THIS, If you check the table under current rentals, you'll see the following table:

enter image description here

But what I actually what is the below:

enter image description here

As you can see currently the footer is missing in the table, currently I have the following markup for the table:

<table class="current-rentals-table">
    <caption>
        <h4>Select Toys to Return</h4>
        <button class="btn-pink">return</button>
    </caption>
    <thead>
        <tr>
            <th></th>
            <th colspan="2">Toy Details</th>
            <th>Date Rented</th>
            <th>Return Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <form action="">
                    <input type="checkbox" name="">
                </form>
            </td>
            <td>
                <img src="images/res/toy-cart/1.png" alt="toy image">
            </td>
            <td>
                <p>Praesent dapibus, neque id cursus faucibus,tortor neque egestas augue, eu vulputate magna eros eu erat. </p>
            </td>
            <td>Nov 12, 2015</td>
            <td>Dec 12, 2015</td>
        </tr>
        <tr>
            <td>
                <form action="">
                    <input type="checkbox" name="">
                </form>
            </td>
            <td>
                <img src="images/res/toy-cart/1.png" alt="toy image">
            </td>
            <td>
                <p>Praesent dapibus, neque id cursus faucibus,tortor neque egestas augue, eu vulputate magna eros eu erat. </p>
            </td>
            <td>Nov 12, 2015</td>
            <td>Dec 12, 2015</td>
        </tr>
        <!-- <tr>
             <td>
               <p>You have 0 credit left. <a href="">Increase your credit</a> to rent more toys or return toys you are currently renting.</p>
             </td>
           </tr> -->
    </tbody>
</table>

The thing is if I try to add a footer to the table using the following code:

<tr>
    <td>
         <p>You have 0 credit left. <a href="">Increase your credit</a> to rent more toys or return toys you are currently renting.</p>
    </td>
</tr>

It breaks the table, so how exactly do I go about adding the footer to the table?

Upvotes: 4

Views: 6365

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

Use the tfoot tag: <tfoot>

...
</tbody>
<tfoot>
    <tr>
        <td colspan="5">
            <p>You have 0 credit left. <a href="">Increase your credit</a> to rent more toys or return toys you are currently renting.</p>
        </td>
    </tr>
</tfoot>

Upvotes: 8

Related Questions