CSS - Display-Flex mit Tabellen

Allgemein
Modell:
Typ:
System
Betriebssystem:
Bitlocker:
Zuletzt gestartet:
Software
Workspace:
Monitor
Modell:

<style>

table.table {
 
width300px;
 
border-collapseCollapse;
}

table.table caption {
 
padding0.25rem;
 
background-color#6BC0C5;
 
borderSolid 1px #656565;
 
border-bottomNone;
 
font-weightBold;
}

table.table th,
table.table  td {
 
borderSolid 1px #656565;
 
padding0.10rem;
}

table.table th {
 
width75px;
 
font-weightNormal;
}

div.tables {
 
displayFlex;
 
flex-wrapWrap;
 
gap0.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.

Allgemein
Modell:
Typ:
System
Betriebssystem:
Bitlocker:
Zuletzt gestartet:
Software
Workspace:
Monitor
Modell:

<style>

div.tables {
 
displayFlex;
 
flex-wrapWrap;
 
gap0.5rem;
 
justify-contentspace-between;
}
</
style>

Beispiel 3

Mit der CSS-Angabe: justify-content: space-around;

Allgemein
Modell:
Typ:
System
Betriebssystem:
Bitlocker:
Zuletzt gestartet:
Software
Workspace:
Monitor
Modell:

<style>

div.tables {
 
displayFlex;
 
flex-wrapWrap;
 
gap0.5rem;
 
justify-contentspace-around;
}
</
style>

Beispiel 4

Mit der CSS-Angabe: flex-wrap: wrap-reverse und gap: 3.5rem

Allgemein
Modell:
Typ:
System
Betriebssystem:
Bitlocker:
Zuletzt gestartet:
Software
Workspace:
Monitor
Modell:

<style>

div.tables {
 
displayFlex;
 
flex-wrapwrap-reverse;
 
gap3.5rem;
}
</
style>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Bausteinen (Codeschnipsel) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<u> Unterstreichen (Physische Auszeichnung)

CSS - Modal-Fenster mit HTML5 und CSS

PHP - Wochentage zählen und als Variabeln zurückgeben

JavaScript - CountDown (2)

MySQL - Datum vom Timestamp anzeigen