modern-table.css

/**
 * Stylesheet for:
 * ModernTable Library
 * Library for displaying a data table from a JSON source.
 * @author SimpleNotSimpler
 * @version 1.0.8
 * @license MIT
 *                                                                                                
 */

 /**
 * =============================================
 * =            CELL STYLES                    =
 * =============================================
 *
 */

.align-text-right {
    text-align: right;
}

.align-text-left {
    text-align: left;
}

.align-text-center {
    text-align: center;
}

.mt-col-header-capitalize { 
    text-transform: capitalize; 
}

/*=====  End of CELL STYLES ======*/



/**
 * =============================================
 * =            STICKY TABLE HEADER            =
 * =============================================
 *
 * Need the border-collapse: separate so that can continue to see borders in table head when have sticky header.
 * Solution from:
 * https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
 * answered Nov 30 '18 at 14:25
 * blackheart
 *
 */

.mt-table {
	border-collapse: separate;
	border-spacing: 0;
}

.mt-header-sticky {
	top: 0px;
	position: sticky;
}

/**
 *
 * Because sticky header makes the header background transparent, explicitly set this. 
 * Color can be inherited. Useful if use Bootstrap 4 class such as table-dark. 
 * However, table header background-ground color is not inheritable and must be explicitly set.
 * 
 */

 .mt-thead-style {
	color: black;
	background-color: white;	
}

/*=====  End of STICKY TABLE HEADER  ======*/

/**
 * =============================================
 * =            TABLE CONTAINER                =
 * =============================================
 */

.mt-table-height {
    height: 75vh;
	display: block;
	overflow-y: auto;
	width: 100%;
}

/*=====  End of Section TABLE CONTAINER  ======*/


/**
 * =============================================
 * =            TABLE CAPTION                  =
 * =============================================
 *
 *	Default Bootstrap 4 > caption-side: bottom. 
 *	Set this explicitly to ensure caption at the top.
 *	Style so looks more like a title for table.
 */

.mt-caption {
	caption-side: top;
	text-align: center;
	font-size: larger;
	font-weight: bold;
	color: black;
}


/*=====  End of TABLE CAPTION  ======*/

/**
 * =============================================
 * =            TABLE ERROR                  =
 * =============================================
 *
 */

.table-error{
	display: block;
}

.table-error h1 {
	font-size: larger;
	font-weight: bold;
}

.table-error h2 {
	font-size: medium;
	font-style: italic;
	padding-bottom: 15px;
}

.table-error .table-error-details{
	display: block;
	margin-left: 1.5rem;
}


/*=====  End of TABLE ERROR  ======*/