Table
A %div
container with the CSS class .table-responsive
makes the table responsive. The width of columns can be adjusted by using the Bootstrap’s sizing classes on the %th
tags (Bootstrap’s grid system doesn’t work for tables in Chrome). When defining the width of a column, it’s important to define the width of the other columns too as they will otherwise be squeezed to a ~%1 width. Additionally, we are using DataTable’s responsive and style them with striped rows (.table-striped
) and borders (.table-bordered
). However, you can use tables with and without datatables.
Example
Table
Narrow | Wide | Other |
---|---|---|
Oranges | Bananas | Kiwis |
Spain | Brazil | Germany |
Fruits Are Us | Fruits & Vegetables Inc. | SUSE Fruit Company Ltd. |
Table with DataTable
Fruits | Origin | Vendor |
---|---|---|
Oranges | Bananas | Kiwis |
Spain | Brazil | Germany |
Fruits Are Us | Fruits & Vegetables Inc. | SUSE Fruit Company Ltd. |
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
%h5 Table
.table-responsive
%table.table.table-sm.table-striped.table-bordered#my-table
%thead
%tr
%th.w-25 Narrow
%th.w-50 Wide
%th.w-25 Other
%tbody
%tr
%td Oranges
%td Bananas
%td Kiwis
%tr
%td Spain
%td Brazil
%td Germany
%tr
%td Fruits Are Us
%td Fruits & Vegetables Inc.
%td SUSE Fruit Company Ltd.
%h5 Table with DataTable
%table.responsive.table.table-sm.table-striped.table-bordered#my-datatable
%thead
%tr
%th Fruits
%th Origin
%th Vendor
%tbody
%tr
%td Oranges
%td Bananas
%td Kiwis
%tr
%td Spain
%td Brazil
%td Germany
%tr
%td Fruits Are Us
%td Fruits & Vegetables Inc.
%td SUSE Fruit Company Ltd.
:javascript
$('#my-datatable').DataTable({
responsive: true
});