suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann ich eine tabellenartige Struktur nur mit Divs und CSS erstellen?

Wie kann ich eine tabellenartige Struktur nur mit Divs und CSS erstellen?

Barbara Streisand
Barbara StreisandOriginal
2024-12-11 12:10:15662Durchsuche

How Can I Create a Table-Like Structure Using Only Divs and CSS?

Mit

und CSS zum Erstellen einer Tabelle

Sie können eine tabellenartige Struktur erstellen, indem Sie nur das

verwenden. Element- und CSS-Eigenschaften. So können Sie es machen:

HTML-Code:

<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-col">Customer ID</div>
    <div class="div-table-col">Customer Name</div>
    <div class="div-table-col">Customer Address</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">001</div>
    <div class="div-table-col">002</div>
    <div class="div-table-col">003</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">xxx</div>
    <div class="div-table-col">yyy</div>
    <div class="div-table-col">www</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">ttt</div>
    <div class="div-table-col">uuu</div>
    <div class="div-table-col">Mkkk</div>
  </div>
</div>

CSS-Styling:

/* Table Container Styling*/
.div-table {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}

/* Table Rows Styling*/
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

/* Table Cells Styling*/
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-cell;
  width: 200px;
  background-color: #ccc;
}

Von Wenn Sie diese Stile anwenden, können Sie ein Tabellenlayout nur mit dem

erstellen. Element, ohne dass das und Elemente. Das Ergebnis ähnelt optisch einer herkömmlichen HTML-Tabelle, verfügt jedoch über ein flexibles und reaktionsfähiges Layout.

Das obige ist der detaillierte Inhalt vonWie kann ich eine tabellenartige Struktur nur mit Divs und CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html for using table tr
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie erstelle ich eine zweireihige Bootstrap 4-Navigationsleiste mit vertikal gestapelten Menüs?Nächster Artikel：Wie erstelle ich eine zweireihige Bootstrap 4-Navigationsleiste mit vertikal gestapelten Menüs?

In Verbindung stehende Artikel

Mehr sehen