There are a number of approaches to responsive tables (see: responsive data tables and responsive data tables demos.

In the first page, Chris Coyier rightly points out that table data needs to go together to make sense and that we get into real hairy situations when the screen size of the device we are using is smaller than the amount needed to represent table data. His solution - was a no-tables solution based on css content. Which comes out pretty cleanly compressing table heads and data in the same cell. However, it puts content into the css, which isn't ideal.

Simon Elvery, in the second post, iterated on that solution and pursued a method using HTML 5s data attributes instead. This more cleanly keeps content out of the CSS. By adding a data-title attribute to the tds we enable this responsive tables approach (via css) at the field formatter level and we don't incur any significant impact.

CommentFileSizeAuthor
#1 responsive-no-tables-2029757-1.patch478 bytesthebruce

Comments

thebruce’s picture

thebruce commented
StatusFileSize
new responsive-no-tables-2029757-1.patch478 bytes

Here is a simple patch that adds the data-title attribute to the tds for this field formatter.

$column[] = array(
  'data' => $content[$field_name],
  'class' => $field_name,
  'data-title' => $content[$field_name]['#title'],
  );
}

The css examples from the elvery site utilize this data-title attribute when the table shrinks via media query for very slim displays.

Hope this is useful for folks pursuing field collection tables for responsive sites.

giupenni’s picture

giupenni commented
Issue summary: View changes

I've used the same aproach and this patch was realy helpful.

I think this patch should be commit in the branch because is very helpful and not has a significant impact on the stability and usage of the module

kevineinarsson credited websystem.

kevineinarsson’s picture

kevineinarsson commented
Status: Active » Fixed

Thanks guys, this is a convenient feature and has been added.

kevineinarsson’s picture

kevineinarsson commented

Oh, sorry. Just realized I messed up the credit.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.