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

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.