Uni/WME
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Tabelle sieht mobil nicht mehr ganz scheiße aus

Browse source
This commit is contained in:
seli 2018-11-04 14:52:47 +01:00
parent 299cd535da
commit 8b3f4a1b63
2 changed files with 37 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
css/main.css
View file

@ -42,7 +42,13 @@
} }
.page { .page {
margin: 0 125px; width: 80%;
margin: 0 auto;
}
@media only screen and (max-width: 500px) {
.page {
width: 100%;
}
} }
@ -98,6 +104,7 @@ h1 {
margin-bottom: 15px; margin-bottom: 15px;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
overflow-x: scroll;
} }
table#t01 { table#t01 {
@ -110,6 +117,7 @@ table#t01 tr:nth-child(odd) {
table#t01 th { table#t01 th {
background-color: #fff; background-color: #fff;
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 { table#t01 th i {
@ -120,6 +128,23 @@ table#t01 th i {
table#t01 th, table#t01 td { table#t01 th, table#t01 td {
line-height: 1em; line-height: 1em;
padding: 11px 0; padding: 11px 0;
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) {
display: none;
}
}
@media only screen and (max-width: 900px) {
table#t01 th:nth-child(n+5), table#t01 td:nth-child(n+5) {
display: none;
}
}
@media only screen and (max-width: 600px) {
table#t01 th:nth-child(n+4), table#t01 td:nth-child(n+4) {
display: none;
}
} }
.boxed { .boxed {
@ -148,7 +173,6 @@ th {
} }
.footer{ .footer{
margin: 0 125px;
border-top: 2px solid lightgreen; border-top: 2px solid lightgreen;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
display: flex; display: flex;

20
index.html
View file

@ -73,15 +73,17 @@
</div> </div>
<footer class="footer"> <div class="page">
<div class="foo-left"> <footer class="footer">
<p>Copyright © 2018 world_data</p> <div class="foo-left">
<p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p> <p>Copyright © 2018 world_data</p>
</div> <p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p>
<div class="foo-right"> </div>
<p>This solution has been created by: <br> Team 26</p> <div class="foo-right">
</div> <p>This solution has been created by: <br> Team 26</p>
</footer> </div>
</footer>
</div>
</body> </body>
</html> </html>