CSS - Display-Flex mit Tabellen
System
| Betriebssystem: |
|
| Bitlocker: |
|
| Zuletzt gestartet: |
|
<style>
table.table {
width: 300px;
border-collapse: Collapse;
}
table.table caption {
padding: 0.25rem;
background-color: #6BC0C5;
border: Solid 1px #656565;
border-bottom: None;
font-weight: Bold;
}
table.table th,
table.table td {
border: Solid 1px #656565;
padding: 0.10rem;
}
table.table th {
width: 75px;
font-weight: Normal;
}
div.tables {
display: Flex;
flex-wrap: Wrap;
gap: 0.5rem;
}
</style>
<div class="tables">
<table class="table">
<caption>Allgemein</caption>
<tr>
<th>Modell:</th>
<td></td>
</tr>
<tr>
<th>Typ:</th>
<td></td>
</tr>
</table>
<table class="table">
<caption>System</caption>
<tr>
<th>Betriebssystem:</th>
<td></td>
</tr>
<tr>
<th>Bitlocker:</th>
<td></td>
</tr>
<tr>
<th>Zuletzt gestartet:</th>
<td></td>
</tr>
</table>
<table class="table">
<caption>Software</caption>
<tr>
<th>Workspace:</th>
<td></td>
</tr>
</table>
<table class="table">
<caption>Monitor</caption>
<tr>
<th>Modell:</th>
<td></td>
</tr>
</table>
</div>
Beispiel 2
Mit der CSS-Angabe: justify-content: space-between;
Beachten Sie den Abstand zwischen den Tabellen.
System
| Betriebssystem: |
|
| Bitlocker: |
|
| Zuletzt gestartet: |
|
<style>
div.tables {
display: Flex;
flex-wrap: Wrap;
gap: 0.5rem;
justify-content: space-between;
}
</style>
Beispiel 3
Mit der CSS-Angabe: justify-content: space-around;
System
| Betriebssystem: |
|
| Bitlocker: |
|
| Zuletzt gestartet: |
|
<style>
div.tables {
display: Flex;
flex-wrap: Wrap;
gap: 0.5rem;
justify-content: space-around;
}
</style>
Beispiel 4
Mit der CSS-Angabe: flex-wrap: wrap-reverse und gap: 3.5rem
System
| Betriebssystem: |
|
| Bitlocker: |
|
| Zuletzt gestartet: |
|
<style>
div.tables {
display: Flex;
flex-wrap: wrap-reverse;
gap: 3.5rem;
}
</style>
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<style> CSS
CSS - Elemente ab einer bestimmten Fensterbreite ausblenden
PHP - Zufallszahl anzeigen
JavaScript - Demo für die Anwendung der Fetch-API
MySQL - Mehrere Spalten einer Tabelle sortieren