Rearrange pricetable sections to improve legibility

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_tables.scss

@@ -28,6 +28,10 @@
     }
   }
 
+  & .pricetable__section td {
+    background-color: $color-grey-lighter;
+    line-height: 32px;
+  }
 }
 
 .pricetable__room-label {

public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/EventPricetable.html

@@ -8,16 +8,13 @@
     <f:section name="Main">
         <div class="table-responsive">
             <table class="table table-striped pricetable">
-                <tr>
-                    <th>Apartments</th>
-                    <f:for each="{roomTypesLabels}" as="type">
-                        <th>{type}</th>
-                    </f:for>
-                </tr>
                 <f:for each="{categories}" as="category" key="categoryKey">
                     <f:if condition="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1) -> f:count()} > 0">
-                        <tr>
-                            <td colspan="{roomTypesPax -> f:count() -> v:math.sum(b: 1)}"><strong>{category}</strong></td>
+                        <tr class="pricetable__section">
+                            <td><strong>Apartments {category}</strong></td>
+                            <f:for each="{roomTypesLabels}" as="type">
+                                <td>{type}</td>
+                            </f:for>
                         </tr>
                         <f:for each="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1)}" as="row">
                             <tr>