Views CSS Tables

Adds a table display type to Views which prints fields out in a pure CSS table.

Why use this?

Views default table display style is packed with features such as column sorting, alignment and separators however the HTML table tag is notoriously difficult to override and style. Using CSS Tables (see http://caniuse.com/#feat=css-table for support) you can create views tables that work well on both mobile and desktop with minimal overrides.

Supports

• Sortable columns
• Column classes
• Drupal views table style options

Caveat

Because many frameworks and themes have default styles for tables you may have to style options such as odd/even striping and table headers to match the style of the rest of your site. However this is pretty minimal in most cases and the advantage for responsive layouts outweighs the additional overhead in many cases.

Example output

  <div class="table views-css-tables-table views-table cols-3">
    <div class="views-css-tables-table--thead">
      <div class="views-css-tables-table--row">
        <div class="views-css-tables-table--cell views-css-tables-table--cell-header views-field views-field-title">
        Title
        </div>
        <div class="views-css-tables-table--cell views-css-tables-table--cell-header views-field views-field-type">
        Type
        </div>

        <div class="views-css-tables-table--cell views-css-tables-table--cell-header views-field views-field-changed">
        Updated date
        </div>
      </div>
    </div>
    <div class="views-css-tables-table--tbody">
      <div class="views-css-tables-table--row odd views-row-first">
        <div class="views-css-tables-table--cell views-field views-field-title">
          <a href="/node/1">Node 1</a>
        </div>
        <div class="views-css-tables-table--cell views-field views-field-type">
          Page
        </div>
        <div class="views-css-tables-table--cell views-field views-field-changed">
          Wednesday, June 17, 2015 - 15:46
        </div>
      </div>
      <div class="views-css-tables-table--row even">
        <div class="views-css-tables-table--cell views-field views-field-title">
          <a href="/node/2">Node 2</a>
        </div>
        <div class="views-css-tables-table--cell views-field views-field-type">
          Article
        </div>
        <div class="views-css-tables-table--cell views-field views-field-changed">
          Wednesday, June 17, 2015 - 15:43
        </div>
      </div>
      <div class="views-css-tables-table--row odd">
        <div class="views-css-tables-table--cell views-field views-field-title">
          <a href=/node/3>Node 3</a>
        </div>
        <div class="views-css-tables-table--cell views-field views-field-type">
          Page
        </div>
        <div class="views-css-tables-table--cell views-field views-field-changed">
          Wednesday, June 17, 2015 - 15:59
        </div>
      </div>
    </div>
  </div>