add sticky coin value header

coinmanager/coinc/static/coinc/styles.css

@@ -41,12 +41,15 @@ li {
 	padding: 0px 5px 5px 0px;
 }
 
+ul.nav {
+  padding-bottom: 30px;
+}
+
 img.country {
   width: 20px;
 }
 
 table {
-  margin-top: 30px;
   border-collapse: collapse;
   width: 360px;
   table-layout: fixed;
@@ -64,26 +67,42 @@ table td {
 }
 
 table > thead > tr > th {
+  position: sticky;
+}
+
+table > thead > tr:first-child > th {
   border-bottom: 1.7px solid black;
   background-image: linear-gradient(0, #9fc5e8, white);
   background-position: 100% 100%;
   padding: 5px;
-  font-weight: normal;
+  text-align: left;
+  top: 0;
+}
+table > thead > tr:nth-child(2) > th {
+  background-color: white;
+}
+table > thead > tr:nth-child(2) > th:after {
+  content: '';
+  position: absolute;
+  left: -0.7px;
+  top: -1.4px;
+  width: 30px;
+  height: 30px;
+  border-top: 1px solid gray;
+  border-left: 1px solid gray;
+  border-bottom: 1px solid gray;
 }
 
-table > tbody > tr > td {
-  border: 1px solid gray;
+table > thead > tr:nth-child(2) > th, table > tbody > tr > td {
   text-align: center;
   font-size: 0.8rem;
-}
-
-td > * {
-  vertical-align: middle;
-  overflow: hidden;
+  font-weight: normal;
+  top: 36px;
 }
 
 table > tbody > tr > td {
   background-color: #b7b7b7;
+  border: 1px solid gray;
 }
 
 table > tbody > tr > td > div.coin {
@@ -94,12 +113,18 @@ table > tbody > tr > td > div.coin {
   line-height: 30px;
 }
 
+td > * {
+  vertical-align: middle;
+  overflow: hidden;
+}
+
+
 td.noexist {
   background-color: #434343;
 }
 
-td.brass {
-  background-color: #ffff99;
+td.brass, th.brass {
+  background-color: #ffff99 !important;
 }
 
 td.rare {

coinmanager/coinc/templates/coinc/country.html

@@ -7,6 +7,20 @@
             <a href="{% url 'coinc:country' country.name_iso %}">{{ country.name }}</a>{% if country.comment %} - {{ country.comment }}{% endif %}
           </th>
         </tr>
+        <tr>
+          <th></th>
+          <th>1</th>
+          <th>2</th>
+          <th>5</th>
+          <th class="brass">10</th>
+          <th class="brass">20</th>
+          <th class="brass">50</th>
+          <th>100</th>
+          <th>200</th>
+          <th>201</th>
+          <th>202</th>
+          <th>203</th>
+        </tr>
       </thead>
       <tbody>
 {% for year in country.years %}{% show_year country year %}{% endfor %}      </tbody>