v1.137.0
Go to content
Press enter

Table in accordions

This example shows how a table looks when used in the accordion component. The override styling in _v-table-override.scss is based on the HTML that the Sitecore Table-tool generates.
Sitecore RTF-editor v-table class
§ 8 Mindstebetaling Pr. 01.05.2025 Pr. 01.03.2026 Pr. 01.03.2027
Stk. 1 – Mindstelønnen for lærlinge såvel under som over 18 år udgør      
0–1 år: 82,95 kr. 85,85 kr. 88,85 kr.
1–2 år: 94,95 kr. 97,85 kr. 100,85 kr.
2-3 år: 101,95 kr. 104,85 kr. 108,85 kr.
3-4 år: 117,95 kr. 121,85 kr. 125,85 kr.
Over 4 år: 139,95 kr. 143,85 kr. 146,85 kr.
Sitecore v-table class - if thead is present
§ 8 Mindstebetaling Pr. 01.05.2025 Pr. 01.03.2026 Pr. 01.03.2027
Stk. 1 – Mindstelønnen for lærlinge såvel under som over 18 år udgør      
0–1 år: 82,95 kr. 85,85 kr. 88,85 kr.
Vue v-table component
§ 8 Mindstebetaling
Pr. 01.05.2025
Pr. 01.03.2026
Pr. 01.03.2027
Stk. 1 – Mindstelønnen for lærlinge såvel under som over 18 år udgør
0–1 år:
82,95 kr.
85,85 kr.
88,85 kr.
1–2 år:
94,95 kr.
97,85 kr.
100,85 kr.
2-3 år:
101,95 kr.
104,85 kr.
108,85 kr.
3-4 år:
117,95 kr.
121,85 kr.
125,85 kr.
Over 4 år:
139,95 kr.
143,85 kr.
146,85 kr.

Styling is based on the following HTML that the Sitecore Table-tool from the RTF-editor generates

<div class="v-table">
  <!--
    <div class="v-table"> wrapper is automatically added in the Sitecore editor
    if you insert a table using the table tool ⿳
  -->
  <table>
    <tbody>

      <tr>
        <td>§ 8 Mindstebetaling</td>
        <td>Pr. 01.05.2025</td>
        <td>Pr. 01.03.2026</td>
        <td>Pr. 01.03.2027</td>
      </tr>

      <tr>
        <td>Stk. 1 – Mindstelønnen for lærlinge såvel under som over 18 år udgør</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>

      <tr>
        <td>0–1 år:</td>
        <td>82,95 kr.</td>
        <td>85,85 kr.</td>
        <td>88,85 kr.</td>
      </tr>

      <tr>
        <td>1–2 år:</td>
        <td>94,95 kr.</td>
        <td>97,85 kr.</td>
        <td>100,85 kr.</td>
      </tr>

      ...etc.

    </tbody>
  </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

← V-date-input →