39

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?

Scath
  • 3,777
  • 10
  • 29
  • 40
Ali Rasooli
  • 501
  • 1
  • 5
  • 8

1 Answers1

82

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.

Mile Mijatović
  • 2,948
  • 2
  • 22
  • 41
  • Any thoughts on how to change caption positioning for empty tables? I noticed that when my table is empty, the caption appears at the top of the table instead of the bottom as well. – jake wong Oct 12 '18 at 02:35
  • Did you tried caption-side: bottom instead of caption-side: top ? You should send me what did you tried so far, I can not guess without some of your code – Mile Mijatović Oct 12 '18 at 08:30
  • Is there a bootstrap classname for this? – Björn C Oct 29 '18 at 11:35
  • There is no special class name from the bootstrap, you can simply use `` – Mile Mijatović Oct 29 '18 at 18:35
  • 12
    This needs to be declared for the `caption` tag; so in total it's: `caption { caption-side:top; }` – Thomas Landauer Nov 07 '19 at 12:58
  • When I write the CSS instruction for the caption tag, for some reason, it just duplicates the thead of the table. Very weird. I have placed the caption tag just after the table declaration and before the thead declaration. – SamyCode Nov 10 '21 at 18:52