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 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

Seriöses Design
Durch das Design entscheidet der Besucher über die Seriosität und Qualität der Seite. Mit einem guten Design haben Sie schnell Pluspunkte bei den Besuchern erzielt, ebenso können Sie damit Ihre Besucher verärgern, und sie somit zu keinem weiteren Besuch bewegen können.