table.css

:root {
	--table-th-padding-side: 0.5rem;
	--table-th-padding-top: 0.25rem;
	--table-th-padding-bottom: 0;
	--table-th-border-bottom-width: 0.125rem;

	--table-td-padding-side: 0.5rem;
	--table-td-padding-top: 0.25rem;
	--table-td-padding-bottom: 0.25rem;
	--table-td-border-bottom-width: 0.0625rem;
}

.cosmo-table {
	border-collapse: collapse;
}

.cosmo-table thead tr th {
	font-weight: var(--font-weight-bold);
	padding: var(--table-th-padding-top) var(--table-th-padding-side) var(--table-th-padding-bottom);
	text-transform: capitalize;
	border-bottom: var(--table-th-border-bottom-width) solid var(--primary-color);
	font-family: var(--font-family-heading);
}

.cosmo-table tbody tr td {
	border-bottom: var(--table-td-border-bottom-width) solid var(--control-border-color);
	font-weight: var(--font-weight-light);
	padding: var(--table-td-padding-top) var(--table-td-padding-side) var(--table-td-padding-bottom);
}

.cosmo-table tbody tr:nth-child(2n-1) td {
	background: var(--table-stripe-color);
}