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>
Project information
- Maintenance fixes only
Considered feature-complete by its maintainers. - 107 sites report using this module
- Created by codesidekick on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.