/* ------------------------------------------------------------------------ *//*
If your information is semantically a table, you use a <table>-tag.  If you just
want a grid for layout purposes, you use some other appropriate html elements
and use display:table in the style sheet.  Here we use <div>-tags - either with
display:flexbox or with display:table.
/* ------------------------------------------------------------------------ */




/* ------------------------------------------------------------------------ *//*
/* table layout using display:flexbox
/* ------------------------------------------------------------------------ */

/* TODO */


/* ------------------------------------------------------------------------ *//*
/* table layout using display:table
/* ------------------------------------------------------------------------ */

/* layout */
.dis-tbl {
	display: table;
}
.dis-tbl-caption {
	display: table-caption;
}
.dis-tbl-thead {
	display: table-header-group;
}
.dis-tbl-tbody {
	display: table-row-group;
}
.dis-tbl-tfoot {
	display: table-footer-group;
}
.dis-tbl-tr {
	display: table-row;
}
.dis-tbl-td, .dis-tbl-th {
	display: table-cell;
}

/* borders */
.dis-tbl.tbl-grid .dis-tbl-td,
.dis-tbl.tbl-grid .dis-tbl-th {
	border-left: 1px solid #222222;
	border-top:  1px solid #222222;
}
.dis-tbl.tbl-grid .dis-tbl-thead .dis-tbl-td:last-of-type,
.dis-tbl.tbl-grid .dis-tbl-thead .dis-tbl-th:last-of-type,
.dis-tbl.tbl-grid .dis-tbl-tbody .dis-tbl-td:last-of-type,
.dis-tbl.tbl-grid .dis-tbl-tfoot .dis-tbl-td:last-of-type {
	border-right: 1px solid #222222;
}
.dis-tbl.tbl-grid .dis-tbl-tfoot .dis-tbl-td {
	border-bottom: 1px solid #222222;
}