Home >Web Front-end >CSS Tutorial >How Can I Create a Table-Like Structure Using Only Divs and CSS?

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

Barbara StreisandOriginal: 2024-12-11 12:10:15661browse

Using

and CSS to Create a Table

You can create a table-like structure using only the

element and CSS properties. Here's how you can do it:

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

By applying these styles, you can create a table layout using only the

element, without the need for the and elements. The result will be visually similar to a traditional HTML table, but it will have a flexible and responsive layout.

The above is the detailed content of How Can I Create a Table-Like Structure Using Only Divs and CSS?. For more information, please follow other related articles on the PHP Chinese website!

css html for using table tr

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Create a Two-Row Bootstrap 4 Navbar with Vertically Stacked Menus?Next article：How to Create a Two-Row Bootstrap 4 Navbar with Vertically Stacked Menus?

See more

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

Related articles