CSS - Display-Flex mit Tabellen

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

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

<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

<style>

div.tables {

 display: Flex;

 flex-wrap: wrap-reverse;

 gap: 3.5rem;

}

</style>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<rt> Ruby Anmerkung

CSS - Vertikaler Text mit horizontalen Buchstaben

PHP - Mit filter_input Zahlenwerte überprüfen

JavaScript - Eingabefeld selektieren

MySQL - Datensatz aktualisieren