Feature: #79622 - Introducing Table Class for Fluid Styled Content

See Issue #79622

Description

In CSS Styled Content it is possible to provide additional CSS classes for the rendering of the table content element. This feature is now available for Fluid Styled Content, too.

The default layout of the Fluid Styled Content element table is now passing the value of Table Class directly to the template and prefixes the value by default with ce-table-<key>.

Implementation in Fluid Styled Content

<table class="ce-table{f:if(condition: data.table_class, then: ' ce-table-{data.table_class}')}">
   ...
</table>

Explanation of Keys and Effects of Table Classes

Name Key CSS Class Additional Effects
Default (empty) (none) (none)
Stiped striped ce-table-striped Odd rows will be highlighted
Bordered bordered ce-table-bordered A border will be displayed around the table

Please note that you need to include the optional static template "Fluid Styled Content Styling" to have a visual effect on the new added CSS classes.

Default styling for optional "Fluid Styled Content Styling"

/* Table */
.ce-table {
   width: 100%;
   max-width: 100%;
}
.ce-table th,
.ce-table td {
   padding: 0.5em 0.75em;
   vertical-align: top;
}
.ce-table thead th {
   border-bottom: 2px solid #dadada;
}
.ce-table th,
.ce-table td {
   border-top: 1px solid #dadada;
}
.ce-table-striped tbody tr:nth-of-type(odd) {
   background-color: rgba(0,0,0,.05);
}
.ce-table-bordered th,
.ce-table-bordered td {
   border: 1px solid #dadada;
}

Edit predefined options

TCEFORM.tt_content.table_class {
   removeItems = striped,bordered
   addItems {
      supertable = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:supertable
   }
}
$GLOBALS['TCA']['tt_content']['columns']['table_class']['config']['items'][] = [
   0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:supertable
   1 = supertable
];

Impact

Table Class is now available for the Fluid Styled Content table content element.