Can I Create Tables Using Only `` and CSS?-CSS Tutorial-php.cn

Can I Create Tables Using Only `` and CSS?

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>

Copy after login

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 */

Copy after login

}

.divRow
{

display: table-row;
width: auto;

Copy after login

}

.divCell
{

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

Copy after login

}

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 */

Copy after login

}
.div-table-row {

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

Copy after login

}
.div-table-col {

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

Copy after login

}

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!

source：php.cn

Previous article：How Can I Display Multiple Div Elements Inline on a Single Line? Next article：How Can I Save CSS Changes Made in Chrome DevTools' Styles Panel?

Statement of this Website

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