Make use of css inside xslt
This commit is contained in:
parent
591de1e5eb
commit
d0249ac8a3
3 changed files with 123 additions and 37 deletions
|
@ -151,6 +151,31 @@ h1 {
|
|||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.world_table {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.world_table tr:nth-child(odd) {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
.world_table th {
|
||||
background-color: #fff;
|
||||
white-space: nowrap; /* kein umbruch bei schmaler ansicht */
|
||||
}
|
||||
|
||||
.world_table th i {
|
||||
font-size: 0.6em;
|
||||
color: lightgreen;
|
||||
}
|
||||
|
||||
.world_table th td {
|
||||
line-height: 1em;
|
||||
padding: 11px 0;
|
||||
font-size: 14px; /* same as section */
|
||||
}
|
||||
|
||||
/*
|
||||
table#t01 {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -161,9 +186,9 @@ table#t01 tr:nth-child(odd) {
|
|||
|
||||
table#t01 th {
|
||||
background-color: #fff;
|
||||
white-space: nowrap; /* kein umbruch bei schmaler ansicht */
|
||||
white-space: nowrap; // kein umbruch bei schmaler ansicht
|
||||
}
|
||||
/* die sort up sort down icons neben den Spaltennamen */
|
||||
// die sort up sort down icons neben den Spaltennamen
|
||||
table#t01 th i {
|
||||
font-size: 0.6em;
|
||||
color: lightgreen;
|
||||
|
@ -172,8 +197,9 @@ table#t01 th i {
|
|||
table#t01 th, table#t01 td {
|
||||
line-height: 1em;
|
||||
padding: 11px 0;
|
||||
font-size: 14px; /* same as section */
|
||||
font-size: 14px; // same as section
|
||||
}
|
||||
*/
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
table#t01 th:nth-child(n+7), table#t01 td:nth-child(n+7) {
|
||||
|
|
|
@ -22,7 +22,7 @@ At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun pa
|
|||
<div id="options" class="option_list"></div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table id="t01"></table>
|
||||
<table id="t01" class="world_table"></table>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
@ -21,41 +21,101 @@
|
|||
<body>
|
||||
<h1>World Data Overview ...</h1>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>name</th>
|
||||
<th>birth_rate_per_1000</th>
|
||||
<th>cell_phones_per_100</th>
|
||||
<th>children_per_woman</th>
|
||||
<th>electricity_consumption_per_capita</th>
|
||||
<th>gdp_per_capita</th>
|
||||
<th>gdp__per__capita__growth</th>
|
||||
<th>inflation_annual</th>
|
||||
<th>internet_user_per_100</th>
|
||||
<th>life_expectancy</th>
|
||||
<th>military_expenditure_percent_of_gdp</th>
|
||||
<th>gps_lat</th>
|
||||
<th>gps_long</th>
|
||||
</tr>
|
||||
<xsl:for-each select="Countries/Country">
|
||||
<table class="world_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><xsl:value-of select="id"/></td>
|
||||
<td><xsl:value-of select="name"/></td>
|
||||
<td><xsl:value-of select="birth_rate_per_1000"/></td>
|
||||
<td><xsl:value-of select="cell_phones_per_100"/></td>
|
||||
<td><xsl:value-of select="children_per_woman"/></td>
|
||||
<td><xsl:value-of select="electricity_consumption_per_capita"/></td>
|
||||
<td><xsl:value-of select="gdp_per_capita"/></td>
|
||||
<td><xsl:value-of select="gdp__per__capita__growth"/></td>
|
||||
<td><xsl:value-of select="inflation_annual"/></td>
|
||||
<td><xsl:value-of select="internet_user_per_100"/></td>
|
||||
<td><xsl:value-of select="life_expectancy"/></td>
|
||||
<td><xsl:value-of select="military_expenditure_percent_of_gdp"/></td>
|
||||
<td><xsl:value-of select="gps_lat"/></td>
|
||||
<td><xsl:value-of select="gps_long"/></td>
|
||||
<th onclick="sortTable(0)">
|
||||
id
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(1)">
|
||||
name
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(2)">
|
||||
stringPerToSlash(birth_rate_per_1000)
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(3)">
|
||||
stringPerToSlash(cell_phones_per_100)
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(4)">
|
||||
stringPerToSlash(children_per_woman)
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(5)">
|
||||
stringPerToSlash(electricity_consumption_per_capita)
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(6)">
|
||||
stringPerToSlash(gdp_per_capita)
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(7)">
|
||||
stringPerToSlash(gdp__per__capita__growth)
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(8)">
|
||||
inflation_annual
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(9)">
|
||||
stringPerToSlash(internet_user_per_100)
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(10)">
|
||||
life_expectancy
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(11)">
|
||||
military_expenditure_percent_of_gdp
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(12)">
|
||||
gps_lat
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
<th onclick="sortTable(13)">
|
||||
gps_long
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</th>
|
||||
</tr>
|
||||
</xsl:for-each>
|
||||
</thread>
|
||||
<tbody>
|
||||
<xsl:for-each select="Countries/Country">
|
||||
<tr>
|
||||
<td><xsl:value-of select="id"/></td>
|
||||
<td><xsl:value-of select="name"/></td>
|
||||
<td><xsl:value-of select="birth_rate_per_1000"/></td>
|
||||
<td><xsl:value-of select="cell_phones_per_100"/></td>
|
||||
<td><xsl:value-of select="children_per_woman"/></td>
|
||||
<td><xsl:value-of select="electricity_consumption_per_capita"/></td>
|
||||
<td><xsl:value-of select="gdp_per_capita"/></td>
|
||||
<td><xsl:value-of select="gdp__per__capita__growth"/></td>
|
||||
<td><xsl:value-of select="inflation_annual"/></td>
|
||||
<td><xsl:value-of select="internet_user_per_100"/></td>
|
||||
<td><xsl:value-of select="life_expectancy"/></td>
|
||||
<td><xsl:value-of select="military_expenditure_percent_of_gdp"/></td>
|
||||
<td><xsl:value-of select="gps_lat"/></td>
|
||||
<td><xsl:value-of select="gps_long"/></td>
|
||||
</tr>
|
||||
</xsl:for-each>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
|
Loading…
Reference in a new issue