CODEWITHSUNDEEP
bootstrap-table
Andrew Sumner
Andrew Sumner

Reputation: 793

How use sticky header extension with html data table?

How would I go about setting up an html table to use sticky headers and set the stickyHeaderOffsetY option.

The examples for https://bootstrap-table.com/docs/extensions/sticky-header/ all assume you're using javascript to populate the tables and I cannot find any documentation on how to set the options any other way.

This is as far as I have gotten:

<table
    data-toggle="table"
    data-search="true"
    data-sticky-header="true"
    data-sortable="true"
    data-show-columns="true"
    class="table table-striped table-hover table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

Upvotes: 2

Views: 2156

Answers (1)

Manyang
Manyang

Reputation: 180

Sorry I cant comment, but do you try this?

<table
  data-sticky-header="true"
  data-sticky-header-offset-y="60"
></table>

Upvotes: 2

Related Questions