Tables In Tabs

Introduction

DataTables.net, Add advanced interaction controls to your HTML tables the free & easy way

Scrolling And Bootstrap Tabs

This example shows how DataTables with scrolling can be used together with Bootstrap tabs (or indeed any other method whereby the table is in a hidden, display:none, element when it is initialised).

The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary