[css] CSS 표시 : 너비가 100 %로 설정된 경우 테이블 행이 확장되지 않습니다.

Program / 글쓴이

약간의 문제가 있습니다. FireFox 3.6을 사용하고 있으며 다음과 같은 DOM 구조가 있습니다.

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

그리고 다음 CSS :

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

이륙하면 100 % 너비로 display:table-row올바르게 표시됩니다 view-row. 다시 넣으면 축소됩니다. 나는 이것을 JS Bin에 올렸다.

http://jsbin.com/ifiyo

무슨 일이야?

답변

display:table-row등을 사용 하는 경우 포함 테이블을 포함하는 적절한 마크 업이 필요합니다. 그것이 없으면 원래 질문은 기본적으로 다음과 같은 잘못된 마크 업을 제공합니다.

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

위의 테이블은 어디에 있습니까? 당신은 단지 난데없이 행을 가질 수 없습니다 (TR이 중 하나에 포함되어야합니다 table, thead, tbody, 등)

대신으로 외부 요소를 추가 display:table하고 포함하는 요소에 100 % 너비를 넣으십시오. 두 개의 내부 셀은 자동으로 50/50으로 이동하고 텍스트를 두 번째 셀의 오른쪽에 맞 춥니 다. floats테이블 요소는 잊으십시오 . 너무 많은 두통을 유발할 것입니다.

마크 업 :

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS :

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name
{
    text-align:right;
}

답변

테스트 된 답변 :

.view-row css에서 다음을 변경하십시오.

display:table-row;

에:

display:table

그리고 “float”를 제거하십시오 . 모든 것이 예상대로 작동합니다.

댓글에서 제시 한대로 포장 테이블이 필요 없습니다. CSS는 암시적인 트리 구조 (이 경우 행) 수준을 생략 할 수 있습니다. 코드가 작동하지 않는 이유는 “너비”가 테이블 행 수준이 아닌 테이블 수준에서만 해석 될 수 있기 때문입니다. “테이블”과 “테이블 셀”이 바로 아래에있는 경우 암시 적으로 행에있는 것으로 해석됩니다.

작업 예 :

<div class="view">
    <div>Type</div>
    <div>Name</div>
</div>

CSS 사용 :

.view {
  width:100%;
  display:table;
}

.view > div {
  width:50%;
  display: table-cell;
}

답변

CSS3 사양에 따라 레이아웃을 테이블 스타일 요소로 래핑 할 필요가 없습니다. 브라우저는 요소가 존재하지 않는 경우 포함 된 요소의 존재를 유추합니다.

답변

에 제공 .view-type클래스 float:left;또는 삭제 float:right;의를.view-name

편집 :<div class="view-row"> 예를 들어 div 를 다른 div로 래핑하십시오 .<div class="table">

다음 CSS를 설정하십시오.

.table {
    display:table;
    width:100%;}

올바른 결과를 얻으려면 테이블 구조를 사용해야합니다.

답변

테이블 내에서 직접 테이블 셀을 중첩 할 수 있습니다. 당신은 테이블이 있습니다. 테이블 행 시작이 작동하지 않습니다. 이 HTML로 시도해보십시오.

<html>
  <head>
    <style type="text/css">
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
  width: 100%;
}
.td {
  display: table-cell;
}
    </style>
  </head>
  <body>

    <div class="table">
      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>
    </div>

      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>

    <div class="table">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
    </div>

  </body>
</html>

답변