>웹 프론트엔드 >CSS 튜토리얼 >`` 및 CSS만 사용하여 테이블을 만들 수 있나요?

`` 및 CSS만 사용하여 테이블을 만들 수 있나요?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-11 10:32:11474검색

Can I Create Tables Using Only `` and CSS?

<div>만을 사용하여 테이블 생성 및 CSS

문제 설명:

기존 HTML 테이블 요소(

)를 사용하여 테이블을 생성하는 것은 번거로울 수 있습니다. <div>만을 사용하여 동등한 테이블 구조를 얻을 수 있습니까? 및 CSS?

샘플 테이블:

다음 샘플 테이블이 제공됩니다:

<div>

<div>

CSS 스타일링:

다음 CSS 코드는 제공됨:

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

}

지원 IE7 이하의 경우:

제공된 코드는 디스플레이: 테이블 사용으로 인해 IE7 이하 버전과 호환되지 않습니다.

대체 해결 방법:

호환성 문제를 해결하기 위해 다음 CSS 코드를 사용할 수 있습니다. 사용됨:

.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 -안부 {

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

}

이점:

이 대체 CSS 코드는 원하는 테이블과 같은 구조를 유지하면서 IE7 이하 호환성을 제공합니다.

위 내용은 `` 및 CSS만 사용하여 테이블을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.