MediaWiki: Tweeki.css

From Serenes Forest - A Fire Emblem Resource
Jump to: navigation, search
Line 1: Line 1:
.test {
+
.table {
   text-align: left;
+
   width: auto;
 +
  height: auto;
 +
  max-width: 100vw;
 +
  overflow: auto;
 
   position: relative;
 
   position: relative;
   border-collapse: collapse;  
+
   display: inline-block;
 
}
 
}
.test th, td {
+
 
   padding: 0.25rem;
+
.table table {
 +
  position: relative;
 +
  border-collapse: collapse;
 +
  margin: 0;
 +
}
 +
 
 +
td,
 +
th {
 +
   padding: 0.25em;
 +
  width: auto;
 +
  text-align: center;
 +
}
 +
 
 +
td {
 +
    z-index: -2;
 +
    position: relative;
 +
}
 +
 
 +
tr:nth-child(n+2) th {
 +
  position: -webkit-sticky; /* for Safari */
 +
  position: sticky;
 +
  left: 0;
 +
  background: #FFF;
 +
  z-index: -1;
 
}
 
}
.test tr:first-child {
+
 
   background: red;
+
tr:nth-child(n+2) th span {
   color: white;
+
   display: block;
 +
  height: 100%;
 +
  width: 1px;
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
   background: #CCC;
 
}
 
}
.test th {
+
 
   background: white;
+
tr:first-child th {
 +
   position: -webkit-sticky; /* for Safari */
 
   position: sticky;
 
   position: sticky;
   top: 0; /* Don't forget this, required for the stickiness */
+
   top: 0;
   box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
+
   background: #000;
 +
  color: #FFF;
 +
}
 +
 
 +
tr:nth-child(n+2) td:first-child {
 +
  border-left: 1px solid #CCC;
 
}
 
}

Revision as of 08:43, 28 October 2020

.table {
  width: auto;
  height: auto;
  max-width: 100vw;
  overflow: auto;
  position: relative;
  display: inline-block;
}

.table table {
  position: relative;
  border-collapse: collapse;
  margin: 0;
}

td,
th {
  padding: 0.25em;
  width: auto;
  text-align: center;
}

td {
    z-index: -2;
    position: relative;
}

tr:nth-child(n+2) th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  z-index: -1;
}

tr:nth-child(n+2) th span {
  display: block;
  height: 100%;
  width: 1px;
  position: absolute;
  top: 0;
  right: 0;
  background: #CCC;
}

tr:first-child th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
}

tr:nth-child(n+2) td:first-child {
  border-left: 1px solid #CCC;
}