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

109

다음 코드가 있습니다.

<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합니까?

html  css 
— 마다 라의 유령
소스
5
테이블 만 사용하면 안 되나요? 훨씬 쉬울 것입니다. 게다가 이것이 표 형식의 데이터라면 더 의미론적일 것입니다.
— punkrockbuddyholly
@thirtydot 그것은 아마도 할 수 있습니다, 그것은 단지 고통스럽고 불필요한 것입니다. 960과 같은 그리드 시스템은 기본적으로이를 달성하지만 전체 페이지 레이아웃에 적용됩니다.
— punkrockbuddyholly 2012
@MrMisterMan : 당신이 무슨 말을하는지 잘 모르겠습니다. 960.gs는 display: table-cell.
— thirtydot
@thirtydot 죄송합니다. OP가 요청한 특정 질문을 잊어 버렸습니다. 맞습니다. CSS를 통해 colspan을 추가 할 수 없습니다. div가 행과 열처럼 작동하도록 만들 수 있으며 여러 열에 걸쳐있는 셀을 포함 할 수 있음을 지적했습니다 .
— punkrockbuddyholly
첫 번째 수준의 조직 에서처럼 시뮬레이션 된 테이블을 사용하면 예를 들어 고정 바닥 글을 만들 수 있습니다. colspan 에뮬레이션을 위해 고유 셀에 중첩 테이블을 만들 수 있습니다. 단일 행과 필요한 수의 셀이 있거나 간단한 부동 div를 사용할 수 있습니다.
— Bernard Dusablon 2013

답변:

27

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를 만들었습니다 .

— F-3000
소스
비슷한 솔루션을 찾고 있습니다. 그러나 대신 맨 윗줄에 5 개의 셀이 있습니다. 맨 아래 행에는 맨 위 행과 같은 크기의 셀 1 개가 필요합니다. 그런 다음 colspan = 2를 갖는 하나의 셀과 colspan = 2를 갖는 다른 셀은 맨 아래 행에도 총 5 개의 셀이됩니다. 솔루션을 기반으로 한 jsfiddle 문제는 다음과 같습니다. 이견있는 사람? jsfiddle.net/7wdza4ye/1
— Varun Verma
1
@VarunVerma, 셀 7과 8 사이에 빈 셀을 추가해야합니다. <div class="cell"></div>작업 만 추가하면됩니다 (적어도 Firefox에서는). 이 디자인에서는 빈 셀을 채워야합니다. 예를 들어 셀 7이 colspan = 3이고 셀 8이 정상인 경우 셀 7과 8 사이에 두 개의 빈 셀이 필요합니다. 다른 것을 디자인하지 않는 한 (여백? 단일 사용자 지정 div?) . 또한 너비가 100px이고 셀이 5 개인 경우 단어가 css-cells로 늘어나고 오버플로 설정이 차이를 만들지 않는 것처럼 보이기 때문에 문제가 발생합니다. 또한에 width대해 다시 계산해야합니다 div.colspan>div>div.
— F-3000
작동했습니다. 감사. 실제로 아래쪽 테두리가 표시되지 않았기 때문에 셀 8 뒤에 빈 셀을 추가했습니다. 최신 정보 : jsfiddle.net/7wdza4ye/3 . 셀 7과 8 사이의 경계를 얻는 방법을 알고 있었습니까? 당신의 도움을 주셔서 감사합니다.
— Varun Verma
1
@VarunVerma, Chrome을 사용하면 8 이후에 빈 셀이 없으면 바깥 쪽 테두리가 불완전하므로 실제로 필요합니다. 셀 7과 8 사이에 테두리를 추가하는 간단한 방법은 다음과 같습니다 div.colspan{border-left:1px solid red}. 경계선없는 div.colspan을 설정하는 규칙 아래 어딘가에 배치해야합니다. 그렇지 않으면 무시됩니다.
— F-3000
@ F-3000에게 감사드립니다. 도움이되었습니다. 나머지는 F-3000 솔루션을 기반으로 한 최신 링크입니다. jsfiddle.net/7wdza4ye/4
— Varun Verma
16

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

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

— Philippe97
소스
7

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>
스 니펫 확장

— stacigh
소스
놀랍습니다.
— Raj Kamal
1
display : table-caption을 사용하면 html 테이블의 캡션 요소처럼 모든 열에 걸쳐 행이 테이블 상단에 배치되므로 실제로 작동하지 않습니다. 첫 번째 또는 마지막 행의 모든 ​​열을 포함하려는 경우에만.
— Michiel
6

간단히 table.

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

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

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

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

— 무뚝뚝한
소스
11
문제는 테이블 형식 데이터가 아니므로 테이블을 사용하고 싶지 않습니다. :)
— Madara 's Ghost
13
나는 모든 것을 CSS로 테이블처럼 똑같이 작동하는 것이 왜 그냥 테이블을 사용하는 것보다 선호하는지 이해하지 못한다. 물론 tr/ td스팸이 가장 예쁜 HTML은 아니지만 그게 유일한 이유입니까? 모든 사람들은 테이블이 형식화에 사용되는 "의미"가 아니라고 말하지만, html 자체는 웹 응용 프로그램을 포함하여 오늘날 표준에서 허용되는 것으로 간주되는 작업의 절반을 "의미"하지 않았습니다.
— 약간의
4
거의 1 년 후, 그러나-약간, 나는 "테이블이 스타일이 없다"는 것 외에 다른 이유없이 테이블을 피하는 사람들과 당신의 짜증을 공유합니다. 그러나 나는 테이블이 테이블이 아니라 더 낮은 너비로 재 배열 될 수 있도록하는 것이 유용한 몇 가지 반응 형 디자인을 실행하고 있습니다. div에 colspan이 없다는 것을 배우는 것은 다소 실망 스럽습니다.
— 스핀의
4

내 상황에서 사용한 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>
— 팀
소스
2
나는 증대했다 .colspan으로 white-space: nowrap;내가 원하는 결과를 얻을 수 있지만, 좋은 일했다.
— kshetline
2

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를 사용할 수도 있습니다.

— JT Houtenbos
소스
1

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>

암호

— Bderevyaga
소스
1

순수한 CSS로 "가짜"colspan에 텍스트를 중앙에 배치하면됩니다.

트릭은 행을로 설정 position:relative한 다음 row만들려는 위치에 "빈 div"를 배치 하고 colspan( height작업하려면 있어야 함 ) cell콘텐츠가 있는 위치를로 설정 display:grid하고 마지막으로 position:absolute요소에 적용 하는 것입니다. 셀 내부 (다른 절대 요소를 중앙에 배치 할 수 있으므로 중앙에 배치).

 .table {
        display: table;
  }
  .row {
      display: table-row;
      position: relative;
  }
  .cell {
      display: table-cell;
      background-color: blue;
      color: white;
      height: 26px;
      padding: 0 8px;
  } 
  .colspan2 {
      display: grid;
  }
  .colspan2 p {
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    margin: 0;
  }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2"><p>Cell</p></div>
        <div class="cell"></div>
    </div>
</div>
스 니펫 확장

— Joe82
소스
0

적절한 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에서 계속 작동합니다.

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

— JRC
소스
첫째, HTML5는이를 완벽하게 지원합니다. <table>단지 사람들이 시각적 서식에 사용 하지 않아야한다는 것입니다 . 구조화 된 데이터를 표시하는 데 사용하는 것은 다른 것 ( 예 : 단순한 예)이 작업에 더 적합 하지 않는 한 사용해야하는 곳 입니다. 둘째, 친구, 4 개의 테이블. 테이블 (rowspan)에 흥미로운 질문을 가져 왔지만 대신 사용하기 위해 답이 울었습니다 . 내 솔루션은 ... 여기 어떻게 작동하는지 내가보고 해<ul><table>
— F-3000
나는 나의 이전 코멘트를 편집 할 것이지만, 시간 제한이 맞았다. colspan에 대한 나의 대답과 마찬가지로, rowspan은 원래의 접근 방식보다 훨씬 덜 번거 로움으로 성취 될 수있다. 직접보십시오 .
— F-3000
의견을 보내 주셔서 감사합니다. HTML5가 테이블을 지원하지 않는다고 말한 적이 없습니다. 많은 사람들이 단순히 그것을 피하려고합니다. 때로는 광고 유형 페이지가 아닌 웹 앱을 작성할 때 버튼 및 / 또는 컨트롤 배치를위한 고정 레이아웃이 더 많이 필요합니다.
— JRC
0

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

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}
— Justo
소스
0

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

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

— naXa
소스
0

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;
            }
— Pkachhia
소스
-1

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

<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에서 테스트되었습니다.

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

— 가브리엘
소스
물론 부트 스트랩과 같은 그리드 솔루션에 항상 의존 할 수 있습니다. 이 특별한 경우에는 display : table을 제공하는 자동 너비가 정말 필요했습니다.
— 가브리엘
또한 스팬 콘텐츠에 배경색을 제공하려면 td의 전체 양으로 tr을 채워야합니다. (
— Gabriel
결국 테이블을 만들고 "테이블 형식 데이터"라는 개념을 재정의했습니다 ^^
— Gabriel
-2

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

<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>
— 헨리 조지
소스
2
문제는 CSS를 사용하는 방법이었습니다.
— Enno Gröper 2013 년
4
미안하지만 정말 나쁜 생각 같네요.
— Madara 's Ghost
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.