Table caption is at the top of the table but when I use a bootstrap class it goes to bottom of the table.
<table class="table table-bordered"> <caption>why?</caption> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> <tr> <th>4</th> <td>5</td> <td>6</td> </tr> </table>
How do I align it to the top of table?
By adding the ” text-center” class of Bootstrap 3 We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.
The <caption> tag defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. Tip: By default, a table caption will be center-aligned above a table.
To put the caption below the table we can use the CSS caption-side property. This property is used to specify the position where the table caption is placed. It is used in HTML Tables. This property can be used with any element whose display property set to caption-side.
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px).
That's because bootstrap 4 has default caption css style - caption-side: bottom
When you change caption-side: top;
you will have your caption on the top of the table.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With