표시가 테이블 셀로 설정된 요소의 경우 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을 전체 테이블의 너비로 만드는 솔루션이 있습니다. 이 기술을 사용하여 테이블의 일부를 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를 사용할 수도 있습니다.