Wie kann ich eine tabellenartige Struktur nur mit Divs und CSS erstellen?-CSS-Tutorial-php.cn

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!

Vorheriger Artikel：Wie erstelle ich eine zweireihige Bootstrap 4-Navigationsleiste mit vertikal gestapelten Menüs? Nächster Artikel：Wie kann ich die Farben der Listenaufzählungszeichen ändern, ohne dass sich dies auf den Inhalt der Listenelemente auswirkt?

Erklärung dieser Website

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

Aktuelle Ausgaben