IT story

사용하여 테이블을 만드는 방법

hot-time 2020. 5. 25. 08:12
반응형

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

<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 {
  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>

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

이것은 오래된 스레드이지만 솔루션을 게시해야한다고 생각했습니다. 나는 최근에 같은 문제에 직면했고 그것을 해결하는 방법 은 복잡한 CSS없이 매우 간단한 아래에 설명 된 3 단계 접근법 을 따르는 것입니다 .

(참고 : 물론 최신 브라우저의 경우 CSS 속성 표시에 table 또는 table-row 또는 table-cell 값을 사용하면 문제가 해결 될 것이지만, 내가 사용한 접근 방식은 최신 브라우저와 이전 브라우저에서 동일하게 작동합니다. CSS 속성 표시에이 값을 사용하십시오.)

3 단계 간단한 접근 방식

div가있는 테이블의 경우에만 테이블 요소에서와 같이 셀과 행을 얻습니다. 다음 방법을 사용하십시오.

  1. 테이블 요소를 블록 div로 바꿉니다 ( .table클래스 사용 ).
  2. 각 tr 또는 th 요소를 블록 div로 바꿉니다 ( .row클래스 사용 ).
  3. 각 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주석에서 언급 한 것처럼 열의 모든 셀에서 동일한 너비가 유지되지 않는 효과를 극복하기 위해 아래 두 가지 방법 중 하나를 채택 할 수 있습니다.

  • Specify a width for cell class

    cell {display:inline-block; width:340px;}

  • Use CSS of modern browsers as below.

    .table {display:table; } .row { display:table-row;} .cell {display:table-cell;}

If there is anything in <table> you don't like, maybe you could use reset file?

or

if you need this for layout of the page check out the cssplay layout examples for designing websites without tables.

I don't see any answer considering Grid-Css. I think it is a very elegant approach: grid-css even supports row span and and column spans. Here you can find a very good article:

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

Use the correct doc type; it will solve the problem. Add the below line to the top of your HTML file:

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

A bit OFF-TOPIC, but may help someone for a cleaner 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>

Works on Chrome and Firefox

In building a custom set of layout tags, I found another answer to this problem. Provided here is the custom set of tags and their CSS classes.

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 }

The key to getting empty cells and cells in general to be the right size, is Box-Sizing and Padding. Border will do the same thing as well, but creates a line in the row. Padding doesn't. And, while I haven't tried it, I think Margin will act the same way as Padding, in forcing and empty cell to be rendered properly.

참고URL : https://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css

반응형

'IT story' 카테고리의 다른 글

div에서 긴 단어를 단어 줄 바꿈하는 방법이 있습니까?  (0) 2020.05.26
Swift에서 오류 유형으로 현지화 된 설명을 제공하는 방법은 무엇입니까?  (0) 2020.05.26
열을 변경하고 기본값을 변경하는 방법은 무엇입니까?  (0) 2020.05.25
iTerm이 다른 OS와 동일한 방식으로 '메타 키'를 번역하도록 만들기  (0) 2020.05.25
문자열의 모든 문자에 for-each 루프를 어떻게 적용합니까?  (0) 2020.05.25

'IT story'의 다른글

  • 현재글사용하여 테이블을 만드는 방법

관련글

댓글

티스토리툴바