programing

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

goodcopy 2023. 9. 5. 21:37
반응형

다음을 사용하여 테이블만 만드는 방법
태그 및 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>

divs는 표 형식의 데이터에 사용해서는 안 됩니다.그것은 배치를 위해 표를 사용하는 것만큼이나 잘못된 것입니다.
을 합니다.<table>쉽고, 의미론적으로 정확하며, 5분 안에 완료됩니다.

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

(참고: 물론 현대 브라우저의 경우 CSS 속성을 표시하기 위해 테이블 또는 테이블 행 또는 테이블 셀 값을 사용하면 문제가 해결됩니다.하지만 제가 사용한 접근 방식은 CSS 속성을 표시하는 데 이러한 값을 사용하지 않기 때문에 현대 브라우저와 이전 브라우저에서 똑같이 잘 작동할 것입니다.

3단계 단순한 접근 방식

테이블 요소와 마찬가지로 셀과 행을 얻을 수 있도록 div만 있는 테이블의 경우 다음 방법을 사용합니다.

  1. div로 :.table
  2. div로 :.row
  3. div( 요로인블사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 시간

    셀 {디스플레이:하이퍼 블록;폭:340ppm;}

  • 아래와 같이 최신 브라우저의 CSS를 사용합니다.

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

응답성이 높은 표를 만드는 것이 도움이 됩니다. 자세한 내용은 다음 웹 사이트를 참조하십시오. https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/

#resp-table {
        width: 100%;
        display: table;
    }
    #resp-table-body{
        display: table-row-group;
    }
    .resp-table-row{
        display: table-row;
    }
    .table-body-cell{
        display: table-cell;
        border: 1px solid #dddddd;
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
    }
<div id="resp-table">
    <div id="resp-table-body">
        <div class="resp-table-row"> 
            <div class="table-body-cell">
                col 1 
            </div>
            <div class="table-body-cell">
                col 2 
            </div>
            <div class="table-body-cell">
                col 3 
            </div>
            <div class="table-body-cell">
                col 4 
            </div>
        </div>
        <div class="resp-table-row"> 
            <div class="table-body-cell">
                second row col 1 
            </div>
            <div class="table-body-cell">
                second row col 2 
            </div>
            <div class="table-body-cell">
                second row col 3 
            </div>
            <div class="table-body-cell">
                second row col 4 
            </div>
        </div>
    </div>
</div>

Grid-Css를 고려한 답이 보이지 않습니다.grid-css는 행 범위와 열 범위를 지원하기도 합니다.여기에서 매우 좋은 기사를 찾을 수 있습니다.

https://medium.com/ @js_cisco/grid-grid-grid-continue-c596c9534611

안에있것있요면다이는에 있는 ,<table>당신은 좋아하지 않습니다, 혹시 재설정 파일을 사용할 수 있습니까?

또는

만약 당신이 페이지 레이아웃에 이것이 필요하다면 테이블이 없는 웹사이트를 디자인하기 위한 cssplay 레이아웃 예제를 확인하세요.

올바른 문서 유형을 사용하면 문제가 해결됩니다.HTML 파일의 맨 위에 다음 행을 추가합니다.

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

주제가 좀 틀리긴 하지만, 더 깨끗한 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에서 작동합니다.

맞춤형 레이아웃 태그 세트를 구축하는 과정에서 이 문제에 대한 다른 해결책을 발견했습니다.사용자 지정 태그 집합과 해당 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 }

일반적으로 빈 셀과 셀을 올바른 크기로 만드는 비결은 박스 크기 조정 및 패딩입니다.테두리도 동일한 작업을 수행하지만 행에 선을 작성합니다.패딩은 그렇지 않습니다.그리고, 제가 시도해보지는 않았지만, 저는 마진이 패딩과 같은 방식으로, 빈 셀이 제대로 렌더링되도록 강요하는 것과 같은 방식으로 행동할 것이라고 생각합니다.

클래식 테이블인 "div 테이블"을 기준으로 "새 태그"를 만들 수 있습니다.

<STYLE>
dtable {
 display:table;
 width:100%;
 border:1px solid #000;
 border-spacing:5px;
}
dtable dtr {
 display:table-row;
 clear: both;
}
dtable dtd {
 display:table-column;
 padding:5px;
}
</STYLE>

<DTABLE>
 <DTR>
  <DTD>row 1 col 1</DTD>
  <DTD>row 1 col 2</DTD>
 </DTR>
 <DTR>
  <DTD>row 2 col 1</DTD>
  <DTD>row 2 col 2</DTD>
 </DTR>
</DTABLE>

각 "dtd"에 대해 다음과 같은 특정 CSS 선택기를 사용할 수 있습니다.

dtable dtd:nth-child(1) {
 width:300px;
 font-weight:bold;
}

dtable dtd:nth-child(2) {
 width:400px;
}

그리고 다음과 같은 "특징":

dtable dtr:nth-child(odd) {
 background-color:#ddd;
}

기타 자세한 내용은 https://css-tricks.com/useful-nth-child-recipies/ 을 참조하십시오.https://css-tricks.com/useful-nth-child-recipies/

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

반응형
저작자표시

'programing' 카테고리의 다른 글

도커 컨테이너의 GPU를 사용하시겠습니까?  (0) 2023.09.05
푸시 시그 대신 뷰 컨트롤러를 교체하거나 탐색 스택에서 제거하는 방법은 무엇입니까?  (0) 2023.09.05
어떤 버전의 nltk, scikit learn이 설치되어 있는지 어떻게 확인합니까?  (0) 2023.09.05
MySQL : 청크별로 큰 선택 항목 검색  (0) 2023.09.05
관찰 가능한 오류를 수동으로 발생시키는 방법은 무엇입니까?  (0) 2023.09.05

'programing'의 다른글

  • 현재글다음을 사용하여 테이블만 만드는 방법다음을 사용하여 테이블만 만드는 방법다음을 사용하여 테이블만 만드는 방법태그 및 CSS

관련글

댓글

티스토리툴바