Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Duplicate headers when using tables in tabs

See original GitHub issue

When I use the bootstrap table in two tabs (bootstrap tab), the header of the table in second tab is duplicating.

The code I’m using to test:

JEC
Cível

    <div id="resultProcessosPendentes" class="tab-content">
        <div class="tab-pane fade in active" id="jec">
            <h5>
                <small>
                    <table id="tableJEC" data-toggle="table" data-url="jec.json" data-show-columns="true"
                        data-search="true" data-show-refresh="true" data-show-export="true" data-pagination="true"
                        data-height="414">
                        <thead>
                            <tr class="white">
                                <th data-field="id" data-sortable="true">
                                    Prazo
                                </th>
                                <th data-field="name" data-sortable="true">
                                    Nº Processo
                                </th>
                                <th data-field="price" data-sortable="true">
                                    Nº Processo Unificado
                                </th>
                                <th data-field="id" data-sortable="true">
                                    Autor
                                </th>
                                <th data-field="name" data-sortable="true">
                                    Vara
                                </th>
                                <th data-field="price" data-sortable="true">
                                    Comarca
                                </th>
                                <th data-field="id" data-sortable="true">
                                    Objeto Específico
                                </th>
                                <th data-field="name" data-sortable="true">
                                    Objeto Geral
                                </th>
                                <th data-field="price" data-sortable="true">
                                    Diretoria
                                </th>
                                <th data-field="id" data-sortable="true">
                                    Data da Audiência
                                </th>
                                <th data-field="name" data-sortable="true">
                                    Status
                                </th>
                                <th data-field="price" data-sortable="true">
                                    Vencimento
                                </th>
                            </tr>
                        </thead>
                    </table>
                </small>
            </h5>
        </div>
        <div class="tab-pane fade" id="civel">
            <h5>
                <small>
                    <table id="tableACL" data-toggle="table" data-url="acl.json" data-show-columns="true"
                        data-search="true" data-show-refresh="true" data-show-export="true" data-pagination="true"
                        data-height="414">
                        <thead>
                            <tr class="white">
                                <th data-field="id" data-sortable="true">
                                    Prazo
                                </th>
                                <th data-field="name" data-sortable="true">
                                    Nº Processo
                                </th>
                                <th data-field="price" data-sortable="true">
                                    Nº Processo Unificado
                                </th>
                                <th data-field="id" data-sortable="true">
                                    Autor
                                </th>
                                <th data-field="name" data-sortable="true">
                                    Vara
                                </th>
                                <th data-field="price" data-sortable="true">
                                    Comarca
                                </th>
                                <th data-field="id" data-sortable="true">
                                    Objeto Específico
                                </th>
                                <th data-field="name" data-sortable="true">
                                    Objeto Geral
                                </th>
                                <th data-field="price" data-sortable="true">
                                    Diretoria
                                </th>
                                <th data-field="id" data-sortable="true">
                                    Data da Audiência
                                </th>
                                <th data-field="name" data-sortable="true">
                                    Status
                                </th>
                                <th data-field="price" data-sortable="true">
                                    Vencimento
                                </th>
                            </tr>
                        </thead>
                    </table>
                </small>
            </h5>
        </div>
    </div>