@schukai/monster/source/components/stylesheet/table.mjs

Monster is a simple library for creating fast, robust and lightweight websites.

/**
 * Copyright © Volker Schukai and all contributing authors, 2026. All rights reserved.
 * Node module: @schukai/monster
 *
 * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
 * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
 *
 * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
 * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
 * For more information about purchasing a commercial license, please contact Volker Schukai.
 */

import { addAttributeToken } from "../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";

export { TableStyleSheet };

/**
 * @private
 * @type {CSSStyleSheet}
 */
const TableStyleSheet = new CSSStyleSheet();

try {
	TableStyleSheet.insertRule(
		`
@layer table { 
th{text-align:inherit}.monster-table{border-collapse:collapse;box-sizing:border-box;margin-bottom:1rem;width:100%}.monster-table tr{margin:10px 0}.monster-table td,.monster-table th{padding:.75rem;vertical-align:top}.monster-table thead th{vertical-align:bottom}.monster-table-container{box-sizing:border-box;container-name:table;container-type:inline-size;display:block;margin:0;overflow-x:auto;padding:8px;width:100%}.monster-table tbody tr td,.monster-table tbody tr th,.monster-table-container{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-table tbody tr td,.monster-table tbody tr th{border-bottom:1px solid var(--monster-theme-control-border-color)}@container table (max-width: 480px){.monster-table thead{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.monster-table,.monster-table tbody,.monster-table td,.monster-table th,.monster-table tr{display:block;width:100%}.monster-table tr{margin:0 0 1rem}.monster-table tbody tr td,.monster-table tbody tr th{align-items:flex-start;display:flex;gap:.75rem;justify-content:flex-start;min-width:0}.monster-table tbody tr td[data-monster-head]:before,.monster-table tbody tr th[data-monster-head]:before{content:attr(data-monster-head);font-weight:700;margin-right:10px}.monster-table tbody tr td[data-label]:before,.monster-table tbody tr th[data-label]:before{content:attr(data-label);font-weight:700;margin-right:10px}.monster-table tbody tr td[data-title]:before,.monster-table tbody tr th[data-title]:before{content:attr(data-title);font-weight:700;margin-right:10px}} 
}`,
		0,
	);
} catch (e) {
	addAttributeToken(
		document.getRootNode().querySelector("html"),
		ATTRIBUTE_ERRORMESSAGE,
		e + "",
	);
}