<div>태그와 CSS 만 사용하여 테이블을 만들고 싶습니다 .
이것은 나의 샘플 테이블입니다.
<body>
<form id="form1">
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">003</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
</form>
</body>그리고 스타일 :
<style type="text/css">
.divTable
{
display: table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
background-color:#ccc;
}
</style>그러나이 표는 IE7 이하 버전에서는 작동하지 않습니다. 귀하의 솔루션과 아이디어를 알려주십시오. 감사.
답변
.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;
}실행 가능한 스 니펫 :
답변
div테이블 형식 데이터에는 사용하지 않아야합니다. 레이아웃에 테이블을 사용하는 것만 큼 잘못되었습니다.
를 사용하십시오 <table>. 쉽고 의미 론적으로 정확하며 5 분 안에 완료됩니다.
답변
이것은 오래된 스레드이지만 솔루션을 게시해야한다고 생각했습니다. 나는 최근에 같은 문제에 직면했고 그것을 해결하는 방법 은 복잡한 CSS없이 매우 간단한 아래에 설명 된 3 단계 접근법 을 따르는 것입니다 .
(참고 : 물론 최신 브라우저의 경우 CSS 속성 표시에 table 또는 table-row 또는 table-cell 값을 사용하면 문제가 해결 될 것이지만, 내가 사용한 접근 방식은 최신 브라우저와 이전 브라우저에서 동일하게 작동합니다. CSS 속성 표시에이 값을 사용하십시오.)
3 단계 간단한 접근 방식
div가있는 테이블의 경우에만 테이블 요소에서와 같이 셀과 행을 얻습니다. 다음 방법을 사용하십시오.
- 테이블 요소를 블록 div로 바꿉니다 (
.table클래스 사용 ). - 각 tr 또는 th 요소를 블록 div로 바꿉니다 (
.row클래스 사용 ). - 각 td 요소를 인라인 블록 div로 대체하십시오 (
.cell클래스 사용 )
.table {display:block; }
.row { display:block;}
.cell {display:inline-block;} <h2>Table below using table element</h2>
<table cellspacing="0" >
<tr>
<td>Mike</td>
<td>36 years</td>
<td>Architect</td>
</tr>
<tr>
<td>Sunil</td>
<td>45 years</td>
<td>Vice President aas</td>
</tr>
<tr>
<td>Jason</td>
<td>27 years</td>
<td>Junior Developer</td>
</tr>
</table>
<h2>Table below is using Divs only</h2>
<div class="table">
<div class="row">
<div class="cell">
Mike
</div>
<div class="cell">
36 years
</div>
<div class="cell">
Architect
</div>
</div>
<div class="row">
<div class="cell">
Sunil
</div>
<div class="cell">
45 years
</div>
<div class="cell">
Vice President
</div>
</div>
<div class="row">
<div class="cell">
Jason
</div>
<div class="cell">
27 years
</div>
<div class="cell">
Junior Developer
</div>
</div>
</div>업데이트 1
thatslch주석에서 언급 한 것처럼 열의 모든 셀에서 동일한 너비가 유지되지 않는 효과를 극복하기 위해 아래 두 가지 방법 중 하나를 채택 할 수 있습니다.
-
cell클래스 너비를 지정하십시오.셀 {display : 인라인 블록; 너비 : 340px;}
-
아래와 같이 최신 브라우저의 CSS를 사용하십시오.
.table {display : table; } .row {display : table-row;} .cell {display : table-cell;}
답변
<table>마음에 들지 않는 것이 있으면 재설정 파일을 사용할 수 있습니까?
또는
페이지 레이아웃에 이것이 필요한 경우 테이블이없는 웹 사이트 디자인을위한 cssplay 레이아웃 예제 를 확인하십시오 .
답변
Grid-Css를 고려한 답변이 없습니다. 매우 우아한 접근 방식이라고 생각합니다. grid-css는 행 범위 및 열 범위를 지원합니다. 여기 당신은 아주 좋은 기사를 찾을 수 있습니다 :
https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611
답변
올바른 문서 유형을 사용하십시오. 문제를 해결할 것입니다. 아래 줄을 HTML 파일 맨 위에 추가하십시오.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">답변
약간 OFF-TOPIC이지만 더 깨끗한 HTML을 위해 누군가를 도울 수 있습니다 … CSS
.common_table{
display:table;
border-collapse:collapse;
border:1px solid grey;
}
.common_table DIV{
display:table-row;
border:1px solid grey;
}
.common_table DIV DIV{
display:table-cell;
}HTML
<DIV class="common_table">
<DIV><DIV>this is a cell</DIV></DIV>
<DIV><DIV>this is a cell</DIV></DIV>
</DIV>Chrome 및 Firefox에서 작동