[TASK] Documentation for FluidStyledContent and CSSStyledContent changes
[Packages/TYPO3.CMS.git] / typo3 / sysext / core / Documentation / Changelog / 8.6 / Feature-79622-IntroducingTableClassForFluidStyledContent.rst
1 .. include:: ../../Includes.txt
2
3 ==================================================================
4 Feature: #79622 - Introducing Table Class for Fluid Styled Content
5 ==================================================================
6
7 See :issue:`79622`
8
9 Description
10 ===========
11
12 In CSS Styled Content it is possible to provide additional CSS classes
13 for the rendering of the table content element. This feature is now
14 available for Fluid Styled Content, too.
15
16 The default layout of the Fluid Styled Content element table is now passing
17 the value of `Table Class` directly to the template and prefixes the value
18 by default with `ce-table-<key>`.
19
20
21 Implementation in Fluid Styled Content
22 --------------------------------------
23
24 .. code-block:: html
25
26 <table class="ce-table{f:if(condition: data.table_class, then: ' ce-table-{data.table_class}')}">
27 ...
28 </table>
29
30
31 Explaination of Keys and Effects of Table Classes
32 -------------------------------------------------
33
34 =============== =============== ===================== ==============================================
35 Name Key CSS Class Additional Effects
36 =============== =============== ===================== ==============================================
37 Default (empty) (none) (none)
38 Stiped striped ce-table-striped Odd rows will be highlighted
39 Bordered bordered ce-table-bordered A border will be displayed around the table
40 =============== =============== ===================== ==============================================
41
42 Please note that you need to include the optional static template "Fluid Styled
43 Content Styling" to have a visual effect on the new added CSS classes.
44
45
46 Default styling for optional "Fluid Styled Content Styling"
47 -----------------------------------------------------------
48
49 .. code-block:: css
50
51 /* Table */
52 .ce-table {
53 width: 100%;
54 max-width: 100%;
55 }
56 .ce-table th,
57 .ce-table td {
58 padding: 0.5em 0.75em;
59 vertical-align: top;
60 }
61 .ce-table thead th {
62 border-bottom: 2px solid #dadada;
63 }
64 .ce-table th,
65 .ce-table td {
66 border-top: 1px solid #dadada;
67 }
68 .ce-table-striped tbody tr:nth-of-type(odd) {
69 background-color: rgba(0,0,0,.05);
70 }
71 .ce-table-bordered th,
72 .ce-table-bordered td {
73 border: 1px solid #dadada;
74 }
75
76
77 Edit predefined options
78 -----------------------
79
80 .. code-block:: typoscript
81
82 TCEFORM.tt_content.table_class {
83 removeItems = striped,bordered
84 addItems {
85 supertable = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:supertable
86 }
87 }
88
89 .. code-block:: php
90
91 $GLOBALS['TCA']['tt_content']['columns']['table_class']['config']['items'][] = [
92 0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:supertable
93 1 = supertable
94 ];
95
96
97 Impact
98 ======
99
100 `Table Class` is now available for the Fluid Styled Content table content element.
101
102
103 .. index:: Fluid, Frontend