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
  });