hello-theme/dev/scss/reset/_table.scss

/**
 * Table styling
 */

@use "./variables" as variables;

$table-border-color: #80808080;
$table-bg: transparent;
$table-bg-odd: #80808012;
$table-bg-hover: #8080801a;

table {
	background-color: $table-bg;
	width: 100%;
	margin-block-end: 15px;
	font-size: 0.9em;
	border-spacing: 0;
	border-collapse: collapse;

	th,
	td {
		padding: 15px;
		line-height: 1.5;
		vertical-align: top;
		border: 1px solid $table-border-color;
	}

	th {
		font-weight: bold;
	}

	thead th,
	tfoot th {
		font-size: 1em;
	}

	caption + thead,
	colgroup + thead,
	thead:first-child {

		tr {

			&:first-child {

				th,
				td {
					border-block-start: 1px solid $table-border-color;
				}
			}
		}
	}

	tbody {

		> tr:nth-child(odd) > td,
		> tr:nth-child(odd) > th {
			background-color: $table-bg-odd;
		}

		tr:hover > td,
		tr:hover > th {
			background-color: $table-bg-hover;
		}
	}

	tbody + tbody {
		border-block-start: 2px solid $table-border-color;
	}

	@media (max-width: variables.$screen-sm - variables.$screen-diff) {

		table {
			font-size: 0.8em;

			th,
			td {
				padding: 7px;
				line-height: 1.3;
			}

			th {
				font-weight: 400;
			}
		}
	}
}