Home >Web Front-end >CSS Tutorial >Can I Create Tables Using Only `` and CSS?

Can I Create Tables Using Only `` and CSS?

Mary-Kate OlsenOriginal: 2024-12-11 10:32:11456browse

Create Tables Using Only <div> and CSS

Problem Statement:

Creating tables using the traditional HTML table element (

) can be cumbersome. Can an equivalent table structure be achieved using only <div> and CSS?

Sample Table:

The following sample table is provided:

<div>

<div>

CSS Styling:

The following CSS code is provided:

.divTable
{

display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */

}

.divRow
{

display: table-row;
width: auto;

}

.divCell
{

float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;

}

Support for IE7 and Below:

The provided code is not compatible with IE7 and below versions due to the use of display: table.

Alternative Solution:

To address the compatibility issue, the following CSS code can be used:

.div-table {

display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */

}
.div-table-row {

display: table-row;
width: auto;
clear: both;

}
.div-table-col {

float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;

}

Benefits:

This alternative CSS code provides IE7 and below compatibility while maintaining the desired table-like structure.

The above is the detailed content of Can I Create Tables Using Only `` and CSS?. For more information, please follow other related articles on the PHP Chinese website!

css html for while using this display table issue

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 Can I Display Multiple Div Elements Inline on a Single Line?Next article：How Can I Display Multiple Div Elements Inline on a Single Line?

See more

Can I Create Tables Using Only `` and CSS?

Related articles