diff --git a/packages/components/src/components/table/component.tsx b/packages/components/src/components/table/component.tsx
index 29300e83c8..75ad3cd9a4 100644
--- a/packages/components/src/components/table/component.tsx
+++ b/packages/components/src/components/table/component.tsx
@@ -496,7 +496,7 @@ export class KolTable implements API {
 						this.state._data
 					);
 					if (typeof html === 'string') {
-						el.innerHTML = html;
+						el.textContent = html;
 					}
 				})
 			);
@@ -567,9 +567,10 @@ export class KolTable implements API {
 								'w-full': true,
 								[headerCell.textAlign as string]: typeof headerCell.textAlign === 'string' && headerCell.textAlign.length > 0,
 							}}
-							innerHTML={headerCell.label}
 							style={{ textAlign: headerCell.textAlign }}
-						></div>
+						>
+							{headerCell.label}
+						</div>
 						{!this.disableSort && typeof headerCell.sort === 'function' && (
 							<kol-button
 								exportparts="icon"
@@ -620,8 +621,9 @@ export class KolTable implements API {
 							  }
 							: undefined
 					}
-					innerHTML={typeof cell.render !== 'function' ? cell.label : ''}
-				></td>
+				>
+					{typeof cell.render !== 'function' ? cell.label : ''}
+				</td>
 			);
 		}
 	};
@@ -698,8 +700,9 @@ export class KolTable implements API {
 																  }
 																: undefined
 														}
-														innerHTML={typeof col.render !== 'function' ? col.label : ''}
-													></td>
+													>
+														{typeof col.render !== 'function' ? col.label : ''}
+													</td>
 												);
 											} else {
 												const headerCell: KoliBriTableHeaderCell = col;
@@ -736,11 +739,12 @@ export class KolTable implements API {
 																	'w-full': true,
 																	[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,
 																}}
-																innerHTML={col.label}
 																style={{
 																	textAlign: col.textAlign,
 																}}
-															></div>
+															>
+																{col.label}
+															</div>
 															{!this.disableSort && typeof headerCell.sort === 'function' && (
 																<kol-button
 																	exportparts="icon"
diff --git a/packages/samples/react/src/components/handout/basic.tsx b/packages/samples/react/src/components/handout/basic.tsx
index 4b7b375b8e..16b685b9de 100644
--- a/packages/samples/react/src/components/handout/basic.tsx
+++ b/packages/samples/react/src/components/handout/basic.tsx
@@ -94,7 +94,9 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'dienstag',
 				label: 'Dienstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
+				},
 				sort: (data) => {
 					return data.sort((first, second) => {
 						if (first.dienstag < second.dienstag) {
@@ -111,27 +113,37 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'mittwoch',
 				label: 'Mittwoch',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'donnerstag',
 				label: 'Donnerstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'freitag',
 				label: 'Freitag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'samstag',
 				label: 'Samstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'sonntag',
 				label: 'Sonntag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
+				},
 			},
 		],
 	],
diff --git a/packages/samples/react/src/components/table/render-cell.tsx b/packages/samples/react/src/components/table/render-cell.tsx
index 2195eb2d49..ed408c812e 100644
--- a/packages/samples/react/src/components/table/render-cell.tsx
+++ b/packages/samples/react/src/components/table/render-cell.tsx
@@ -20,7 +20,10 @@ const HEADERS: KoliBriTableHeaders = {
 				label: 'Datum (string)',
 				key: 'date',
 				textAlign: 'center',
-				render: (_el, _cell, tupel) => `<strong>${DATE_FORMATTER.format((tupel as Data).date)}</strong>`,
+				render: (el, tupel) => {
+					// https://reactjs.org/docs/portals.html
+					getRoot(el).render(<strong>{DATE_FORMATTER.format((tupel as Data).date)}</strong>);
+				},
 				sort: (data: Data[]) =>
 					data.sort((data0, data1) => {
 						if (data0.date < data1.date) return -1;
diff --git a/packages/samples/react/src/components/table/test-data.ts b/packages/samples/react/src/components/table/test-data.ts
index 57280f6934..601956e164 100644
--- a/packages/samples/react/src/components/table/test-data.ts
+++ b/packages/samples/react/src/components/table/test-data.ts
@@ -1,66 +1,66 @@
 export type Data = {
 	order: number;
-	date: Date;
+	date: String;
 };
 export const DATA: Data[] = [
 	{
 		order: 0,
-		date: new Date('1981-05-26T21:33:43.612Z'),
+		date: new Date('1981-05-26T21:33:43.612Z').toString(),
 	},
 	{
 		order: 1,
-		date: new Date('1971-04-25T19:44:17.014Z'),
+		date: new Date('1971-04-25T19:44:17.014Z').toString(),
 	},
 	{
 		order: 2,
-		date: new Date('1986-07-10T11:39:29.539Z'),
+		date: new Date('1986-07-10T11:39:29.539Z').toString(),
 	},
 	{
 		order: 3,
-		date: new Date('1976-02-02T10:00:36.346Z'),
+		date: new Date('1976-02-02T10:00:36.346Z').toString(),
 	},
 	{
 		order: 4,
-		date: new Date('1998-07-07T12:50:36.016Z'),
+		date: new Date('1998-07-07T12:50:36.016Z').toString(),
 	},
 	{
 		order: 5,
-		date: new Date('1994-09-05T05:10:44.078Z'),
+		date: new Date('1994-09-05T05:10:44.078Z').toString(),
 	},
 	{
 		order: 6,
-		date: new Date('1986-05-23T13:05:01.874Z'),
+		date: new Date('1986-05-23T13:05:01.874Z').toString(),
 	},
 	{
 		order: 7,
-		date: new Date('1975-06-29T21:51:29.359Z'),
+		date: new Date('1975-06-29T21:51:29.359Z').toString(),
 	},
 	{
 		order: 8,
-		date: new Date('1974-05-15T23:47:02.499Z'),
+		date: new Date('1974-05-15T23:47:02.499Z').toString(),
 	},
 	{
 		order: 9,
-		date: new Date('1990-05-27T10:13:19.641Z'),
+		date: new Date('1990-05-27T10:13:19.641Z').toString(),
 	},
 	{
 		order: 10,
-		date: new Date('1993-10-20T03:54:08.739Z'),
+		date: new Date('1993-10-20T03:54:08.739Z').toString(),
 	},
 	{
 		order: 11,
-		date: new Date('2000-02-25T11:55:43.705Z'),
+		date: new Date('2000-02-25T11:55:43.705Z').toString(),
 	},
 	{
 		order: 12,
-		date: new Date('1988-08-27T09:59:12.251Z'),
+		date: new Date('1988-08-27T09:59:12.251Z').toString(),
 	},
 	{
 		order: 13,
-		date: new Date('1980-10-24T10:41:24.897Z'),
+		date: new Date('1980-10-24T10:41:24.897Z').toString(),
 	},
 	{
 		order: 14,
-		date: new Date('1995-01-25T12:31:27.983Z'),
+		date: new Date('1995-01-25T12:31:27.983Z').toString(),
 	},
 ];
diff --git a/packages/samples/react/src/scenarios/complex-form/component.tsx b/packages/samples/react/src/scenarios/complex-form/component.tsx
index df98b4858a..56956a48b3 100644
--- a/packages/samples/react/src/scenarios/complex-form/component.tsx
+++ b/packages/samples/react/src/scenarios/complex-form/component.tsx
@@ -40,48 +40,48 @@ export const TerminComponent: FC = () => (
 		</div>
 		<div className="grid sm:grid-cols-1 gap-2">
 			<KolTable
-				_caption="Öffnungszeiten"
+				_label="Öffnungszeiten"
 				_data={
 					[
 						{
 							stadtteil: 'Brackel',
-							montag: '08:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
+							montag: '08:00 - 12:00, 14:00 - 16:00',
+							dienstag: '08:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
 							freitag: '08:00 - 12:00',
 						},
 						{
 							stadtteil: 'Dorstfeld',
-							montag: '09:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '09:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '09:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '09:00 - 12:00<br/>14:00 - 18:00',
+							montag: '09:00 - 12:00, 14:00 - 16:00',
+							dienstag: '09:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '09:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '09:00 - 12:00, 14:00 - 18:00',
 							freitag: '09:00 - 12:00',
 						},
 						{
 							stadtteil: 'Aplerbeck',
-							montag: '08:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
+							montag: '08:00 - 12:00, 14:00 - 16:00',
+							dienstag: '08:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
 							freitag: '08:00 - 12:00',
 						},
 						{
 							stadtteil: 'Innenstadt Ost',
-							montag: '07:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
-							freitag: '07:00 - 12:00<br/>13:00 - 16:00',
+							montag: '07:00 - 12:00, 14:00 - 16:00',
+							dienstag: '07:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
+							freitag: '07:00 - 12:00, 13:00 - 16:00',
 						},
 						{
 							stadtteil: 'Innenstadt West',
-							montag: '07:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
-							freitag: '07:00 - 12:00<br/>13:00 - 16:00',
+							montag: '07:00 - 12:00, 14:00 - 16:00',
+							dienstag: '07:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
+							freitag: '07:00 - 12:00, 13:00 - 16:00',
 							/*render: (el, data) => {
 						el.innerHTML = `<kol-badge _color="#ff0000" _label="NIX"></kol-badge>`;
 					  },*/
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-scenarios-complex-form-firefox-darwin.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-scenarios-complex-form-firefox-darwin.png
new file mode 100644
index 0000000000..732c9ae940
Binary files /dev/null and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-scenarios-complex-form-firefox-darwin.png differ
diff --git a/packages/themes/bzst/snapshots/theme-bzst/snapshot-for-scenarios-complex-form-firefox-darwin.png b/packages/themes/bzst/snapshots/theme-bzst/snapshot-for-scenarios-complex-form-firefox-darwin.png
new file mode 100644
index 0000000000..8332a1f98e
Binary files /dev/null and b/packages/themes/bzst/snapshots/theme-bzst/snapshot-for-scenarios-complex-form-firefox-darwin.png differ
diff --git a/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-scenarios-complex-form-firefox-darwin.png b/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-scenarios-complex-form-firefox-darwin.png
new file mode 100644
index 0000000000..d70a1311aa
Binary files /dev/null and b/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-scenarios-complex-form-firefox-darwin.png differ
diff --git a/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-table-badge-size-firefox-darwin.png b/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-table-badge-size-firefox-darwin.png
index fb8987634f..1a7239c3eb 100644
Binary files a/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-table-badge-size-firefox-darwin.png and b/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-table-badge-size-firefox-darwin.png differ
diff --git a/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-scenarios-complex-form-firefox-darwin.png b/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-scenarios-complex-form-firefox-darwin.png
new file mode 100644
index 0000000000..8c9f1bd8f0
Binary files /dev/null and b/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-scenarios-complex-form-firefox-darwin.png differ
diff --git a/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-scenarios-complex-form-firefox-darwin.png b/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-scenarios-complex-form-firefox-darwin.png
new file mode 100644
index 0000000000..795366804a
Binary files /dev/null and b/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-scenarios-complex-form-firefox-darwin.png differ