However, it gets tricker when adding large tables. In this case, Hydejack will break the layout and grant the table the entire available screen width to the right:

Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned
First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell
Second line foo strong baz Second line foo strong baz Second line foo strong baz Second line foo strong baz
Third line quux baz bar Third line quux baz bar Third line quux baz bar Third line quux baz bar
Second body       Second body       Second body       Second body      
2 line       2 line       2 line       2 line      
Footer row       Footer row       Footer row       Footer row      

Scroll table

If the extra space still isn’t enough, the table will receive a scrollbar. It is browser default behavior to break the lines inside table cells to fit the content on the screen. By adding the scroll-table class on a table, the behavior is changed to never break lines inside cells, e.g:

Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned
First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell
Second line foo strong baz Second line foo strong baz Second line foo strong baz Second line foo strong baz
Third line quux baz bar Third line quux baz bar Third line quux baz bar Third line quux baz bar
Second body       Second body       Second body       Second body      
2 line       2 line       2 line       2 line      
Footer row       Footer row       Footer row       Footer row      

You can add the scroll-table class to a markdown table by putting {:.scroll-table} in line directly below the table. To add the class to a HTML table, add the it to the class attribute of the table tag, e.g. <table class="scroll-table">.

Flip table

Alternatively, you can “flip” (transpose) the table. Unlike the other approach, this will keep the table head (now the first column) fixed in place.

You can enable this behavior by adding flip-table or flip-table-small to the CSS classes of the table. The -small version will only enable scrolling on “small” screens (< 1080px wide).

NOTE: This approach only works on simple tables that have a single tbody and an optional thead.

Example:

Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned Default aligned Left aligned Center aligned Right aligned
First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell First body part Second cell Third cell fourth cell
Second line foo strong baz Second line foo strong baz Second line foo strong baz Second line foo strong baz
Third line quux baz bar Third line quux baz bar Third line quux baz bar Third line quux baz bar
4th line quux baz bar 4th line quux baz bar 4th line quux baz bar 4th line quux baz bar
5th line quux baz bar 5th line quux baz bar 5th line quux baz bar 5th line quux baz bar
6th line quux baz bar 6th line quux baz bar 6th line quux baz bar 6th line quux baz bar
7th line quux baz bar 7th line quux baz bar 7th line quux baz bar 7th line quux baz bar
8th line quux baz bar 8th line quux baz bar 8th line quux baz bar 8th line quux baz bar
9th line quux baz bar 9th line quux baz bar 9th line quux baz bar 9th line quux baz bar
10th line quux baz bar 10th line quux baz bar 10th line quux baz bar 10th line quux baz bar

You can add the flip-table class to a markdown table by putting {:.flip-table} in line directly below the table. To add the class to a HTML table, add the it to the class attribute of the table tag, e.g. <table class="flip-table">.

Small tables

If a table is small enough to fit the screen even on small screens, you can add the stretch-table class to force a table to use the entire available content width. Note that stretched tables can no longer be scrolled.

Default aligned Left aligned Center aligned Right aligned
^ Second cell Third cell fourth cell
    :Header 1 :Header 2 :Header 3 :Header 4
  Row 1 ..        
  Row 2 .. Test      
  Row 3 ..        
  Row 4 ..