Feature/6159 Table: Spacer between body and footer (#6860)

packages/components/src/components/@shared/_kol-table-stateless-mixin.scss

@@ -68,6 +68,11 @@
 			}
 		}
 
+		tr.foot-spacer,
+		tr.head-spacer {
+			display: none;
+		}
+
 		.selection-header-cell {
 			width: 0;
 		}

packages/components/src/components/table-stateless/component.tsx

@@ -657,19 +657,24 @@ export class KolTableStateless implements TableStatelessAPI {
 			</th>
 		);
 	}
-	/**
-	 * Renders the table footer (`<tfoot>`) using the provided footer data.
-	 * It maps over each row in the footer and renders it similarly to a body row.
-	 *
-	 *  @returns {JSX.Element} - The rendered table footer or an empty string if no footer data is provided.
-	 */
-	private renderFoot(): JSX.Element {
+
+	private renderSpacer(variant: 'foot' | 'head', cellDefs: KoliBriTableHeaderCell[][] | KoliBriTableCell[][]): JSX.Element {
+		const colspan = cellDefs?.[0].reduce((acc, row) => acc + (row.colSpan || 1), 0);
+
+		return (
+			<tr class={`${variant}-spacer`} aria-hidden="true">
+				<td colSpan={colspan}></td>
+			</tr>
+		);
+	}
+
+	private renderFoot(): JSX.Element[] | null {
 		if (!this.state._dataFoot || this.state._dataFoot.length === 0) {
-			return '';
+			return null;
 		}
 
 		const rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headerCells, true);
-		return <tfoot>{rows.map(this.renderTableRow)}</tfoot>;
+		return <tfoot>{[this.renderSpacer('foot', rows), rows.map(this.renderTableRow)]}</tfoot>;
 	}
 
 	public render(): JSX.Element {
@@ -702,40 +707,43 @@ export class KolTableStateless implements TableStatelessAPI {
 
 						{Array.isArray(this.state._headerCells.horizontal) && (
 							<thead>
-								{this.state._headerCells.horizontal.map((cols, rowIndex) => (
-									<tr key={`thead-${rowIndex}`}>
-										{this.state._selection && this.renderHeadingSelectionCell()}
-										{cols.map((cell, colIndex) => {
-											if (cell.asTd === true) {
-												return (
-													<td
-														key={`thead-${rowIndex}-${colIndex}-${cell.label}`}
-														class={{
-															[cell.textAlign as string]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
-														}}
-														colSpan={cell.colSpan}
-														rowSpan={cell.rowSpan}
-														style={{
-															textAlign: cell.textAlign,
-															width: cell.width,
-														}}
-														ref={
-															typeof cell.render === 'function'
-																? (el) => {
-																		this.cellRender(cell, el);
-																	}
-																: undefined
-														}
-													>
-														{typeof cell.render !== 'function' ? cell.label : ''}
-													</td>
-												);
-											} else {
-												return this.renderHeadingCell(cell, rowIndex, colIndex);
-											}
-										})}
-									</tr>
-								))}
+								{[
+									this.state._headerCells.horizontal.map((cols, rowIndex) => (
+										<tr key={`thead-${rowIndex}`}>
+											{this.state._selection && this.renderHeadingSelectionCell()}
+											{cols.map((cell, colIndex) => {
+												if (cell.asTd === true) {
+													return (
+														<td
+															key={`thead-${rowIndex}-${colIndex}-${cell.label}`}
+															class={{
+																[cell.textAlign as string]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
+															}}
+															colSpan={cell.colSpan}
+															rowSpan={cell.rowSpan}
+															style={{
+																textAlign: cell.textAlign,
+																width: cell.width,
+															}}
+															ref={
+																typeof cell.render === 'function'
+																	? (el) => {
+																			this.cellRender(cell, el);
+																		}
+																	: undefined
+															}
+														>
+															{typeof cell.render !== 'function' ? cell.label : ''}
+														</td>
+													);
+												} else {
+													return this.renderHeadingCell(cell, rowIndex, colIndex);
+												}
+											})}
+										</tr>
+									)),
+									this.renderSpacer('head', this.state._headerCells.horizontal),
+								]}
 							</thead>
 						)}
 						<tbody>{dataField.map(this.renderTableRow)}</tbody>

packages/themes/default/src/mixins/kol-table-stateless-wc.scss

@@ -51,8 +51,8 @@
 		}
 
 		table,
-		table thead tr:last-child th,
-		table thead tr:last-child td {
+		table thead tr:nth-last-child(2) th,
+		table thead tr:nth-last-child(2) td {
 			border-width: 0;
 			border-bottom-width: calc(var(--border-width) * 2);
 			border-style: solid;
@@ -75,7 +75,7 @@
 			align-items: center;
 		}
 
-		tr:nth-child(even) {
+		table tbody tr:nth-child(even) {
 			background-color: var(--color-mute);
 		}
 
@@ -89,6 +89,17 @@
 			font-weight: 700;
 		}
 
+		tr.foot-spacer,
+		tr.head-spacer {
+			display: inherit;
+			height: rem(24);
+
+			td {
+				border: none;
+				padding: 0;
+			}
+		}
+
 		.input {
 			input {
 				&:hover {