#DATATABLES RESPONSIVE RESIZE CODE#
#DATATABLES RESPONSIVE RESIZE TRIAL#

#DATATABLES RESPONSIVE RESIZE TRIAL#

Through trial and experimentation, I discarded these methods: Not recommended ways to build a responsive table Visual examples of those four possibilities. We either have to change the markup or start manipulating with JavaScript.

#DATATABLES RESPONSIVE RESIZE CODE#

You can’t do this with normal table markup in pure CSS because the code order is by rows and the wrappers lock it in.

Collapse by columns: This is where things get tricky.

Switching display:table into display:block will cause this with normal table markup.

Collapse by rows: Split each row into its own single column mini-table on small screens.This is trivial in CSS with an overflow='auto' wrapper. Vertical scroll: If the layout and content is exact and critical, a user could scroll to the left or right.Squash: If columns have little content they might squash horizontally with no issues on a mobile screen so not changing the layout needs to be a valid option.Let’s think about the different ways a table could behave responsively: The most meaningful markup still comes from non-tabular semantic content. In essence, nothing in the markup tells the screen reader user if the content should be read via rows or columns. VoiceOver at least allows you to navigate in any direction using arrow keys, but you still have no indication which order you should navigate in. The reader steps through the table via rows no matter how your content is arranged., and even scope='row|col' don’t seem to do anything! The only way to get it to recognise a heading is to wrap it in an tag. Neither CromeVox or VoiceOver tells you when you are on a table heading.ChromeVox tells you that you are on a table, while VoiceOver also tells you how many columns and rows the table has (which is helpful).Using a few screen readers ( Chrome Vox and VoiceOver), I attempted to navigate the markup: I did some tests with a simple best practice table. Surely native table markup helps a user with a screen reader understand the order content should be read in and navigated through?

One of my main concerns was accessibility. Standard table markup seems to make semantic sense and does a pretty decent job of aligning cells. Examples of comparison tables Is table markup still working for us? I set out to find a flexible and simple solution that could work as a reusable web component, regardless of the content within. The tables I find most frustrating are comparison tables or normal content layout tables, there are really no comprehensive CSS based solutions for making these types of tables responsive. There are many types of tables on websites where content can vary as wildly as the approaches used to make them responsive. This is a great addition to territory we’ve been treading for a while. That’s what I like about this post by Davide Rizzo: it admits that, then gets on with some solutions. When you resize the window again they go back to hiding, but try explaining to an end user that they have to maximize their window twice every visit.There is no single solution to make any appropriately responsive.

The 'hidden' fixed columns pop out from under the 'visible' fixed columns and you have two identical columns showing. They all work, but when I replace the alerts with datatables fnRedrawLayout nothing happens.Īs bad as the Responsive table looks for not returning to the wide mode, FixedColumns looks worse. I have tried numerous scripts that catch the resize event to popup alerts to test that they caught the maximize button resize event. Dragging the window size also works correctly. Subsequent uses redraw the tables correctly. It all seems to be tied to the first use of the window maximize button. Both on my testing tables at work with the FixedColumn plugin within a 100% width container and the example Responsive plugin tables on. I have seen the same problem as kapris when using Win7 with IE8 and Chrome.

Datatables responsive resize