kern/superx/style/sx_tabelle.css

/*spezifische Basics */

html, body {
    max-width: 100%;
    overflow-x: visible;
}
/*20240704 BF hierher verschoben*/
/*20240609/13 BF eingefügt u. angepasst*/ 
   
.table-container {
      border-collapse: collapse; 
      font-family: sans-serif;
      font-weight: normal;
      font-size: 0.8em;
      overflow-x: auto; 	/* Nur horizontales Scrollen */
      overflow-y: auto; 	/* Vertikales Scrollen */
      max-height: 80vh; 	/* max. Container-Höhe 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */
      max-width: 185vb; 	/* max. Container-Breite 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */
      width: 100%; 		/* volle Container-Breite */
      white-space: normal;	/* Ermöglicht Zeilenumbrüche in den Tabellenzellen */
      /*white-space: nowrap; 	/* Verhindert Zeilenumbrüche in den Tabellenzellen */
      -webkit-overflow-scrolling: touch; /* Für bessere Scroll-Erfahrung auf Mobilgeräten */
    }

.level-center { 			/*für zentrierte Icons in Tabelle*/
  display: flex;
  justify-content: center;
}

table {					
  border-collapse: collapse; 		/* Verhindert Doppellinien an den Grenzen */
  /*min-width: 130%;*/	/* Tabellen-Breite gößer als Container-Breite, damit Scrollbalken sichtbar ist */
  max-width:100%;
  white-space: normal; 
}

th, td {
  padding: 8px;
  border: 1px solid #ddd;
  white-space: normal; 			/* Erlaubt Zeilenumbrüche */
}

table thead th { 			/*für Tabellenposition*/
  position: sticky;
  top: 0;
  z-index: 20; 
}

table th.header, table th.fixed-column1-title*/ {    	/*für Spaltentitel*/
  background: #ECF0F3 /*#dbdee3ff*/;
  color: hsl(0, 0%, 21%);
  font-weight: bold; }

table th.fixed-column1-title, table td.fixed-column1 {	/*zum Fixieren des 1. Spaltentitels b. horizont. Scrollen*/
  position: sticky;
  z-index: 25;
  left: 0em; }

table td.fixed-column1 {
  background: #ECF0F3; /*whitesmoke;  		/*zum Fixieren der 1. TabSpalte b. horizont. Scrollen*/
  filter: opacity(1.0);
  position: sticky;
  z-index: 20/*500*/;
  left: 0em;
  border: thin solid; 
  border-collapse: collapse; }*/
 
table tr.erglevel0 {
  font-weight:bolder;
  background: white;
  border: thin solid; 
  border-collapse: collapse; }

table tr.erglevel_1 {
  font-weight:bolder;
  background: white;
  color: hsl(0, 0%, 21%);
  border: thin solid; 
  border-collapse: collapse; }
  
table tr.erglevel_2 {
  font-weight:bold;
  background: white /*#f1f1f1*/;
  color: hsl(0, 0%, 21%);
  border: thin solid; 
  border-collapse: collapse; }
  
table tr.erglevel_3 {
  font-weight:normal;
  background: white /*#f1f1f1*/;
  border: thin solid; 
  border-collapse: collapse; }
/*nach oben verschoben*/
table.ergtabelle		
{
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
/*border:thin solid rgb(0,0,0);*/ /*20240619 BF auskommentiert*/
empty-cells:show;
border-collapse: separate;
border-spacing: 0;
font-size:80%;
}

table.ergtabelle thead {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  z-index: 4;
}

table td.ergfeld
{
empty-cells:show;
vertical-align:top;
border:thin solid gray;
}

table td.prozent
{
border:thin solid gray;
empty-cells:show;
font-style:italic;
color:#999999;
}

table td.lt5
{
border:thin solid gray;
empty-cells:show;
}

table td.lt5:before {content:"< 5";color:#ff0000;}

table th.header
{
background-color: #ECF0F3; /*#dbdee3ff;*/
color: black;
border: 1px solid black;
padding: 5px;
border-collapse: separate;
border-spacing: 0;
empty-cells: show;
font-size: 80%;  
}

table th.printheader
{
font-size:10pt;
font-weight:bold;
text-align:center;
background-color:white;
border-top:1px solid;
border-right:1px solid;
border-bottom:1px solid;
border-left:0;
}

table td.result
{
font-size:10pt;
empty-cells:show;
}

table td.string
{
text-align:left;
empty-cells:show;
border:thin solid gray;
}

table td.decimal
{
text-align:right;
empty-cells:show;
border:thin solid gray;

}
table td.boldnumber
{
text-align:right;
empty-cells:show;
font-weight:bold;
}

table td.integer
{
text-align:right;
empty-cells:show;
border:thin solid gray;
}

p.errmsg
{
border: medium solid red;
text-align:left;
background-color:#d7d7d7;
}

table tr.erglevel0
{font-weight:bolder;
background-color:#f1f1f1;
}

table tr.erglevel_1
{font-weight:bold;
background-color:#f1f1f1;
}

table tr.erglevel_2
{font-weight:bold;
background-color:#f1f1f1;
}

table tr.erglevel_3
{font-weight:normal;;
background-color:#f1f1f1;
}

table tr.erglevel_4
{font-weight:normal;;
background-color:#f1f1f1;
}
/*Wenn nur 1 Ebene vorlieg:*/
table tr.erglevel1_0
{font-weight:bolder;
}

table tr.erglevel1_1
{font-weight:normal;;
}

/*Wenn nur 2 Ebenen vorliegen:*/
table tr.erglevel2_0
{font-weight:bolder;
background-color:#f1f1f1;
}

table tr.erglevel2_1
{font-weight:bolder;
}

table tr.erglevel2_2
{font-weight:normal;;
}

/*Wenn nur 3 Ebenen vorliegen:*/
table tr.erglevel3_0
{font-weight:bolder;
background-color:#f1f1f1;
}

table tr.erglevel3_1
{font-weight:bolder;
background-color:#f1f1f1;
}

table tr.erglevel3_2
{font-weight:bolder;
}

table tr.erglevel3_3
{font-weight:normal;;
}

/*Wenn nur 4 Ebenen vorliegen:*/
table tr.erglevel4_0
{font-weight:bolder;
background-color:#f1f1f1;
}

table tr.erglevel4_1
{font-weight:bolder;
background-color:#f1f1f1;
}

table tr.erglevel4_2
{font-weight:bolder;
}

table tr.erglevel4_3
{font-style:italic;
}

table tr.erglevel4_4
{font-weight:normal;;
}

table tr.issumme
{font-weight:bolder;
background-color:#d7d7d7;
}

span.hidden_navi
{
margin:0px;
padding:0px;
font-size:smaller;
display:inline
}

.listRowEven {
	background-color: #EFEFEF;
}

.listRowEvenHover {
/*	background-color: #EFEAB3; */
	background-color: #FFFABF;
}

.listRowOdd {
	background-color: #FFFFFF;
}

.listRowOddHover {
	background-color: #FFFABF;
}

table.ergtabelle, table.ergtabelle th, table.ergtabelle td {
	/*border: 1px solid black;*//*20240619 BF auskommentiert*/
	border-collapse: separate;
	border-spacing: 0;
}

table.ergtabelle tr:hover {background-color: hsl(219, 70%, 76%); /*#e5e5e5;*/ }

table.ergtabelle th {
    background-color: #dbdee3ff;
    color: black;
    border: 1px solid black;
    border-collapse: separate;
}

table.ergtabelle th, table.ergtabelle td {
    padding: 5px;
}

p.teiltabelle_titel {
  clear: left;
  line-height: 115%;
  border-bottom: 2px solid black;
  color: black;
  display: block;
  font-size: 115%;
  font-weight: bold;
  margin: 5px 0 20px 5px;
  padding: 0px 0px 0px 5px;
}

/*Legende*/ 
.legende { 		
   /*display: flex;*/ 
   flex: 1 1 auto; 	/* 20240911; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/
   flex-flow: row wrap;
   justify-content: flex-start;
   align-items: normal;
   padding: 0.3rem; 
   margin-bottom: 0.1rem;
   border: thin solid hsl(0, 0%, 71%); /*hellgrau*/
   border-radius: 0.3em; } 

p.legende {
  color: black;
  gap: 3px;		/* Abstand zwischen den Elementen */
  width: auto; }

.legende-info {
  font-weight: normal; }

  
/*Table-Buttonleiste mit input-container inkl.: Label, Auswahlfeld, Button*/
.input-container {  
  display: flex;
  align-items: center;
  flex-wrap: nowrap; 	/*Verhindert Umbruch bei kleinerem Viewport*/
  white-space: nowrap; 	/*Verhindert den Umbruch des Labeltextes */
  flex-shrink: 1; 	/*Lässt Select-Element schrumpfen, falls der Platz knapp wird*/
  padding-bottom: 0.1rem;
}

.field { margin-left: 1px; } 	/*für Abstand Buttonbar-SelectFeld*/

.select select {            	/*für Auswahlfeldstyle*/
	border:thin solid hsl(0, 0%, 71%); /*hellgrau*/ /*oder var(--bulma-link-light)*/ 
	border-radius: 0.3em; } 
	
/* Standarddarstellung für größere Viewports */
.input-container > .label {
	margin-bottom: 0.3rem;
	margin-right: 0.5rem; } /* Abstand zwischen Label und Eingabefeld*/
		
.input-container {
	flex-direction: row;
	align-items: center;
	width: 100% }

/*Spezifische Anpassungen für kleinere Viewports bis 768px=Tablet-Hochformat*/	
@media screen and (max-width: 768px) { 	
	.input-container, .legende, p.legende, .breadcrumb, .buttonbar  {
	    flex-direction: column;  /* Stapelt die Felder vertikal; 20241102 BF geänd. v row*/	    align-items: center;
	    width: 100%
	}
}

/*Datensatzinfo unterhalb Ergebnistabelle*/
.pagination-container {
  display: inline-flex; 
  align-items: center; 
  justify-content: left; 
  max-width: 80%;
  gap: 2px; }		/* Abstand zwischen den Elementen */