Caption displaying below table, why?

Caption displaying below table, why?

user5674637user5674637 Posts: 5Questions: 2Answers: 1

Has anyone experienced their table caption appearing below the table? I can't seem to figure out how to get it on top. I am using a straightforward datatable initialization (nothing out of the ordinary).

<table cellpadding="0" cellspacing="0" class="dataTable table table-striped compact" style="width:100%" id="deliveries-table">
     <caption class="lead">Deliveries</caption>
</table>
var deliveriesTable = $("#deliveries-table").DataTable({....});

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @user5674637 ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • user5674637user5674637 Posts: 5Questions: 2Answers: 1
    edited February 2019

    @colin

    Oops, my bad. Sure thing (make sure to hit run-js at load): here is the repro http://live.datatables.net/yuyaqiyi/3/edit

    I am using Bootstrap 4 styling

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @user5674637 ,

    Thanks for that code, that helps. This blog post here, and this forum thread here, should help - they're discussing that <caption> tag, and how it can be placed. If no joy, let us know,

    Cheers,

    Colin

  • user5674637user5674637 Posts: 5Questions: 2Answers: 1
    edited February 2019

    Thank you. I needed to specify style="caption-side: top" in my caption tag... which isn't very intuitive but it gets the job done. If you look at Bootstraps documentation... this is also the realized functionality. Not sure why it would be build this way. https://getbootstrap.com/docs/4.0/content/tables/#captions

This discussion has been closed.