<div> 태그와 CSS 만 사용하여 테이블을 만드는 방법

182

<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 이하 버전에서는 작동하지 않습니다. 귀하의 솔루션과 아이디어를 알려주십시오. 감사.

html css

— 쿠 마라
소스

이 기사를

— tanathos

32

왜 div테이블을 만드는 데 사용 하시겠습니까?

— huy

3

좋은 기사 'CSS 테이블이 HTML 테이블보다 낫습니까?' [ vanseodesign.com/css/tables/]

— vladimir

5

누군가가 일반 테이블 대신 div 기반 테이블을 사용하려는 이유는 .... div 기반 테이블의 렌더링 / 애니메이션 / 리플로가 실제로 일반 테이블을 렌더링하는 것보다 (더 큰 DOM 크기의 경우) 더 빠르기 때문입니다. ..... 이것을 참조하십시오 .... stubbornella.org/content/2009/03/27/… 이 .... developer.nokia.com/community/wiki/… 그 위에 slickgrid와 같은 모든 데이터 집약적 자바 스크립트 플러그인 etc divBasedtable 사용

— bhavya_w

1

@huy 아마도 divs가 테이블보다 더 유연 하기 때문입니다 !

— Kai Noack

262

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

<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">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>
  </form>
</body>

스 니펫 확장

— 시바 코 무라 벨리
소스

224

감사합니다! 실제로 자신의 질문에 대답하고 "그게 멍청한 생각"이라고 말하는 사람이 아닌 사람. 사람들이 질문에 대답하지 않을 때 나는 그것을 싫어 ... 그가 그것을 요청하면, 대답해야합니다

— 브라이언 Leishman

23

@ stumpx : 때로는 정답은 "하지 마십시오"입니다. 이것은 그 때 중 하나입니다. "div와 CSS를 사용하여 테이블을 만드는 방법"을 묻는 경우 두 가지 문제 중 하나가 있습니다. 틀린 질문을하거나 틀린 일을하려는 것입니다.

— cHao

28

@cHao 당신이 그 대답이되어야한다고 생각한다면 그것을 무시하고 실제로 질문에 대답하고 싶은 사람이 대답하도록하십시오.

— Brian Leishman 2016 년

14

@ stumpx : 질문에 대답하지 않아야 한다고 생각되면 질문 이 존재하지 않아야하기 때문에 닫으려고 투표합니다. 모든 유효한 질문에는 답변이 필요합니다. 그러나 내가 말했듯이 때로는 가장 정확한 대답은 "하지 마십시오"입니다. 잘못된 문제를 해결하는 방법에 대해 누군가에게 조언하는 것이 좋습니까? 다른 사람들이 그러한 조언을 하는 동안 묵상하는 것이 좋 습니까? 난 반대 야.

— cHao

5

디자이너가 머리에 무엇을 가지고 있는지 모르는 경우 위와 같이 div 구조로 데이터를 남겨두면 테이블에 두는 것이 훨씬 좋습니다. 더 나은 것은 부동 div에서 테이블로 또는 그 반대로 변환하는 것이 더 쉽다는 것을 의미합니다.

— anatoly techtonik

96

div테이블 형식 데이터에는 사용하지 않아야합니다. 레이아웃에 테이블을 사용하는 것만 큼 잘못되었습니다.
를 사용하십시오 <table>. 쉽고 의미 론적으로 정확하며 5 분 안에 완료됩니다.

— 코비
소스

8

그래도 응용 프로그램에 따라 다를 수 있습니다. 때때로 표 형식으로 표시되는 것은 분할되지만 선형 일 수 있습니다. 예를 들어 캘린더는 div 대신 테이블로 혜택을 누릴 수 있습니다.

— Dan

2

@ Dann : 그들은 목록으로 이점을 가질 수 있지만, 많은 div는 의미 적으로 레이아웃 테이블만큼 나쁩니다.

— cHao

4

테이블이 DIV로 설계되도록 요구하는 몇 가지 이유가 있습니다. 그 중 하나는 SharePoint 2007에서 테이블 태그를 사용하여 페이지에있는 모든 콘텐츠를

— 엉망으로 만듭니다

2

@ simplyletgo : 의미 적으로, div가 테이블처럼 작동하도록하는 것보다 테이블 셀을 블록으로 스타일을 지정하는 것이 더 적절합니다.

— cHao

1

왜 안돼? 테이블을 사용하는 경우 특정 셀 주위에 스크롤 막대를 추가하여 테이블과 같은 고정 된 헤더를 가질 수 없습니다. 테이블에는 많은 제한이 있는데 왜 div로 이것을 할 수 없습니까?

— pilavdzice

9

이것은 오래된 스레드이지만 솔루션을 게시해야한다고 생각했습니다. 나는 최근에 같은 문제에 직면했고 그것을 해결하는 방법 은 복잡한 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;}

— 수닐
소스

1

열의 크기가 같지 않으므로 이렇게하지 않습니다.

— thatsIch

너비는 테이블 요소에서와 같이 동작하지 않습니다. 그러나 .cell 클래스의 너비를 .cell {width : 300px;}와 같은 CSS에 지정하면 비슷한 효과를 얻을 수 있습니다. 그러나 셀 CSS 클래스의 너비를 정의하지 않으면 div를 사용할 때 언급 한 제한이 항상 있습니다. 동일한 효과를 얻는 다른 방법은 다음 클래스를 사용하는 것입니다. <style> .table {display : table; } 위의 답변에서 언급 한 클래스를 사용하는 대신 .row {display : table-row;} .cell {display : table-cell;} </ style>.

— Sunil

@thatsIch, 나는 당신이 언급 한 폭 문제에 대한 해결 방법을 설명 내 대답에 UPDATE 1 추가 한

— 선일

4

<table>마음에 들지 않는 것이 있으면 재설정 파일을 사용할 수 있습니까?

또는

페이지 레이아웃에 이것이 필요한 경우 테이블이없는 웹 사이트 디자인을위한 cssplay 레이아웃 예제 를 확인하십시오 .

— 어 슐라 카르 젤렉
소스

3

Grid-Css를 고려한 답변이 없습니다. 매우 우아한 접근 방식이라고 생각합니다. grid-css는 행 범위 및 열 범위를 지원합니다. 여기 당신은 아주 좋은 기사를 찾을 수 있습니다 :

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

— 자르도
소스

2

올바른 문서 유형을 사용하십시오. 문제를 해결할 것입니다. 아래 줄을 HTML 파일 맨 위에 추가하십시오.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

— abcd
소스

2

약간 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에서 작동

— Harijs Krūtainis
소스

2

그리고 테이블 셀에 <div>요소가 있다면? 당신은 아마 원하는.common_table div > div

— vol7ron

2

사용자 정의 레이아웃 태그 세트를 구축 할 때이 문제에 대한 또 다른 답변을 찾았습니다. 여기에 사용자 정의 태그 세트 및 CSS 클래스가 제공됩니다.

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

빈 셀과 셀이 일반적으로 올바른 크기가되도록하는 열쇠는 Box-Sizing and Padding입니다. 테두리도 같은 작업을 수행하지만 행에 선을 만듭니다. 패딩은하지 않습니다. 그리고 그것을 시도하지는 않았지만 여백은 패딩과 같은 방식으로 강제 및 빈 셀이 올바르게 렌더링되도록 할 것이라고 생각합니다.

— 전자 그물 아치
소스