표시가 테이블 셀로 설정된 요소의 경우 Colspan / Rowspan

표시가 테이블 셀로 설정된 요소의 경우 Colspan / Rowspan

---

다음 코드가 있습니다.

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

꽤 직설적 인. 요소에 colspan (또는 colspan과 동등한 것)을 어떻게 추가 display: table-cell합니까?

---

내가 아는 한 colspan / rowspan의 부족은 display:table. 이 게시물을 참조하십시오.

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

---

OP는 솔루션이 순수한 CSS 여야한다고 명시 적으로 규정 하지 않기 때문에 , 특히 테이블 내부에 테이블을 포함하는 것보다 훨씬 더 우아하기 때문에 오늘 알아 낸 해결 방법을 고집스럽게 던질 것입니다.

예제는 행당 2 개의 셀과 2 개의 행이있는 <table>과 같습니다. 여기서 두 번째 행의 셀은 colspan="2".

Iceweasel 20, Firefox 23 및 IE 10에서 이것을 테스트했습니다.

div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}

div.row {
  display: table-row;
}

div.cell {
  display: table-cell;
  border: 1px solid red;
}

div.colspan,
div.colspan+div.cell {
  border: 0;
}

div.colspan>div {
  width: 1px;
}

div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}

<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>

여기에서 실사 (데모) .

편집 : 기본적으로 배경색을 제외하고 코드를 프린터 친화적으로 조정했습니다. 나는 또한 여기 늦은 답변에서 영감을 얻은 rowspan-demo를 만들었습니다 .

---

Chrome 30에서 작동하는 더 간단한 솔루션 :

행 display: table대신 사용하여 Colspan을 에뮬레이션 할 수 있습니다 display: table-row.

.table {
    display: block;
}
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
    display: block;
}

유일한 함정은 누적 된 행의 셀이 다른 테이블에 있기 때문에 수직으로 정렬되지 않는다는 것입니다.

---

colspan을 시뮬레이션하는 직접적인 CSS 방법을 찾고 있다면 display: table-caption.

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}
.colspan2 {
  /* What to do here? */
  display: table-caption;
}

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

---

간단히 table.

테이블은 레이아웃 목적으로 사용될 때만 눈살을 찌푸립니다.

이것은 표 형식 데이터 (데이터의 행 / 열)처럼 보입니다. 따라서 table.

자세한 내용은 이 질문에 대한 내 대답을 참조하십시오 .

div를 테이블로 사용하여 동일한 것을 생성

---

내 상황에서 사용한 CSS의 열을 확장하는 한 가지 방법이 있습니다.

https://jsfiddle.net/mb8npttu/

<div class='table'>
    <div class='row'>
        <div class='cell colspan'>
            spanning
        </div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>

    <div class='row'>
        <div class='cell'>1</div>
        <div class='cell'>2</div>
        <div class='cell'>3</div>
    </div>
</div>

<style>
    .table { display:table; }
    .row { display:table-row; }
    .cell { display:table-cell; }
    .colspan { max-width:1px; overflow:visible; }
</style>

---

다음과 같이 colspan 콘텐츠의 위치를 ​​"relative"로, 행을 "absolute"로 설정할 수 있습니다.

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}

---

CSS

.tablewrapper {
  position: relative;
}
.table {
  display: table;
  position: relative
}
.row {
  display: table-row;
}
.cell {
  border: 1px solid red;
  display: table-cell;
}
.cell.empty
{
  border: none;
  width: 100px;
}
.cell.rowspanned {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}
.cell.colspan {
  position: absolute;
  left: 0;
  right: 0;
}

HTML

<div class="tablewrapper">
  <div class="table">
    <div class="row">
      <div class="cell rowspanned">
        Center
      </div>
      <div class="cell">
        Top right
      </div>
    </div>
    <div class="row">
      <div class="cell empty"></div>
      <div class="cell colspan">
        Bottom right
      </div>
    </div>
  </div>
</div>

암호

---

적절한 div 클래스와 CSS 속성을 사용하여 colspan 및 rowspan의 원하는 효과를 모방 할 수 있습니다.

여기 CSS가 있습니다

.table {
    display:table;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    padding: 5px;
    vertical-align: middle;
}

다음은 샘플 HTML입니다.

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">X</div>
                    <div class="cell">Y</div>
                    <div class="cell">Z</div>
                </div>
                <div class="row">
                    <div class="cell">2</div>
                    <div class="cell">4</div>
                    <div class="cell">6</div>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        <div class="table">
                            <div class="row">
                                <div class="cell">A</div>
                            </div>
                            <div class="row">
                                <div class="cell">B</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        ROW SPAN
                    </div>    
                </div>
            </div>
        </div>
    </div>
</div>    

질문과 대부분의 응답에서 제가보고있는 것은 사람들이 "테이블 셀"역할을하는 주어진 div에서 임베디드 테이블처럼 작동하는 다른 div를 삽입하고 프로세스를 시작할 수 있다는 사실을 잊은 것 같습니다. 위에.

*** 매력적이지는 않지만 이러한 유형의 서식을 찾고 테이블을 사용하지 않으려는 사용자에게 적합합니다. 데이터 레이아웃의 경우 TABLE은 HTML5에서 계속 작동합니다.

바라건대 이것은 누군가를 도울 것입니다.

---

현재로서는 이것을 달성 할 수 없습니다.

AFAIK 이것은 현재 "작업 진행 중"상태 인 것으로 보이는 사양 인 CSS 테이블에 의해 다루어집니다 .

---

div https://codepen.io/pkachhia/pen/JyWMxY를 사용하여 colspan을 적용하는 방법을 찾을 수있는이 솔루션을 시도 할 수 있습니다.

HTML :

<div class="div_format">
            <div class="divTable">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Project Name</div>
                        <div class="divTableCell cell_value">: Testing Project</div>
                        <div class="divTableCell cell_lable">Project Type</div>
                        <div class="divTableCell cell_value">: Web application</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Version</div>
                        <div class="divTableCell cell_value">: 1.0.0</div>
                        <div class="divTableCell cell_lable">Start Time</div>
                        <div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Version</div>
                        <div class="divTableCell cell_value">: 2.0.0</div>
                        <div class="divTableCell cell_lable">End Time</div>
                        <div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Revision</div>
                        <div class="divTableCell cell_value">: 3</div>
                        <div class="divTableCell cell_lable">Overall Result</div>
                        <div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
                    </div>                          
                </div>
                <div class="divCaptionRow">
                    <div class="divCaptionlabel">Description</div>
                    <div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
                </div>
            </div>
        </div>

CSS :

body {
                font-family: arial
            }
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }
            .div_format {
                width: 100%;
                display: inline-block;
                position: relative
            }           
            .divTable {
                display: table;
                width: 100%;            
            }
            .divTableRow {
                display: table-row
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group
            }
            .divTableCell,
            .divTableHead {
                display: table-cell;
                padding: 10px
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group;
                font-weight: bold
            }
            .divTableFoot {
                background-color: #EEE;
                display: table-footer-group;
                font-weight: bold
            }
            .divTableBody {
                display: table-row-group
            }
            .divCaptionRow{
                display: table-caption;
                caption-side: bottom;
                width: 100%;
            }
            .divCaptionlabel{
                caption-side: bottom;
                display: inline-block;
                background: #ccc;
                padding: 10px;
                width: 15.6%;
                margin-left: 10px;
                color: #727272;
            }
            .divCaptionValue{
                float: right;
                width: 83%;
                padding: 10px 1px;
                border-bottom: 1px solid #dddddd;
                border-right: 10px solid #fff;
                color: #5f5f5f;
                text-align: left;
            }

            .cell_lable {
                background: #d0d0d0;
                border-bottom: 1px solid #ffffff;
                border-left: 10px solid #ffffff;
                border-right: 10px solid #fff;
                width: 15%;
                color: #727272;
            }
            .cell_value {
                border-bottom: 1px solid #dddddd;
                width: 30%;
                border-right: 10px solid #fff;   
                color: #5f5f5f;
            }

---

colspan을 전체 테이블의 너비로 만드는 솔루션이 있습니다. 이 기술을 사용하여 테이블의 일부를 colspan 할 수 없습니다.

암호:

    *{
      box-sizing: border-box;
    }
    .table {
        display: table;
        position: relative;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid red;
        padding: 5px;
        text-align: center;
    }
    .colspan {
        position: absolute;
        left: 0;
        width: 100%;
    }
    .dummycell {
        border-color: transparent;
    }

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell dummycell">&nbsp;</div>
        <div class="cell colspan">Cell</div>
    </div>
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
</div>

설명:

colspan에 절대 위치를 사용하여 테이블의 전체 너비로 만듭니다. 테이블 자체에는 상대적 위치가 필요합니다. 행의 높이를 유지하기 위해 더 미셀을 사용합니다. 절대 위치는 문서의 흐름을 따르지 않습니다.

물론 요즘에는이 문제를 해결하기 위해 flexbox와 grid를 사용할 수도 있습니다.

---

이것이 오래된 질문이더라도이 문제에 대한 해결책을 공유하고 싶습니다.

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div class="spanned-content">Cell</div>
        </div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan:after {
        /* What to do here? */
        content: "c";
        display: inline;
        visibility: hidden;
    }
    .spanned-content {
        position: absolute;
    }
</style>

여기에 바이올린이 있습니다. 실제로 스팬이 아니며 솔루션이 약간 엉망이지만 일부 상황에서 유용합니다. Chrome 46, Firefox 31 및 IE 11에서 테스트되었습니다.

제 경우에는 열의 너비를 유지하고 데이터의 하위 섹션에 제목을 지정하면서 표 형식이 아닌 일부 데이터를 표 형식으로 표시해야했습니다.

---

중첩 테이블을 사용하여 열 범위 중첩 ...

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="table">
        <div class="row">
          <div class="cell">Cell</div>
          <div class="cell">Cell</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

또는 열 범위가 전체 행을 포함하는 2 개의 테이블을 사용합니다.

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
</div>

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

참고 URL : https://stackoverflow.com/questions/9277661/colspan-rowspan-for-elements-whose-display-is-set-to-table-cell