CSS 테이블 셀 등폭

CSS 테이블 셀 등폭

테이블 용기 안에 테이블 셀 요소의 개수가 정해지지 않았습니다.

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

테이블 셀 내에 다른 크기의 콘텐츠가 있더라도 테이블 셀의 너비를 동일하게 할 수 있는 순수한 CSS 방법이 있습니까?

최대 너비를 갖는다는 것은 당신이 얼마나 많은 세포를 가지고 있는지 아는 것을 수반할 것이라고 생각합니다.

다음은 셀의 수가 불분명한 작동 피들입니다: http://jsfiddle.net/r9yrM/1/

각 부모에게 폭을 고정할 수 있습니다.div(테이블), 그렇지 않으면 평소처럼 100%입니다.

요령은 각 셀에 어느 정도 폭을 주어 작동시키는 것입니다. 여기서 2%입니다.이는 브라우저가 표시된 차원을 준수하기 위해 매우 노력하는 테이블 알고리즘인 다른 테이블 알고리즘을 트리거할 것입니다.
Chrome (및 IE8 - 필요한 경우)을 사용하여 테스트하십시오.최근 사파리에서는 괜찮지만 이 속임수가 그들과의 호환성을 기억할 수 없습니다.

CSS(관련 지침):

div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

편집(2013):OS X의 사파리6를 조심하세요.table-layout: fixed; 잘못된(또는 다른 브라우저와 다를 수도 있고, 매우 다를 수도 있습니다).CSS2.1 REC 테이블 레이아웃을 교정하지 않았습니다 ;).다른 결과에 대비해야 합니다.

HTML

<div class="table">
  <div class="table_cell">Cell-1</div>
  <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
  <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
  <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>​

CSS

.table{
  display:table;
  width:100%;
  table-layout:fixed;
}
.table_cell{
  display:table-cell;
  width:100px;
  border:solid black 1px;
}

데모.

그냥 사용.max-width: 0에서display: table-cell효과적인 요소:

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

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}

<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>

교체하다

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

와 함께

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

디브들을 테이블처럼 보여주려고 하는 것을 둘러싼 모든 문제들을 보세요.테이블 레이아웃을 모방하기 위해 table-xxx를 추가해야 했습니다.

테이블은 모든 브라우저에서 지원되며 매우 잘 작동합니다.왜 그들을 버리죠?그들이 흉내를 내야만 했다는 것은 그들이 그들의 일을 잘했다는 증거입니다.

제 생각에는 작업에 가장 적합한 도구를 사용하고, 표로 작성된 데이터나 표로 작성된 데이터 테이블과 유사한 것을 원한다면 그냥 작업하세요.

답장이 너무 늦었습니다. 알아요. 하지만 제 목소리를 낼 가치가 있습니다.

이것은 모두에게 효과가 있을 것입니다.

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

이는 반복에 의해 생성된 테이블 데이터에도 적용됩니다.

테이블 셀 스타일을 다음과 같이 설정하면 됩니다.width: auto, 내용이 비어 있습니다.이제 열은 같은 너비이지만 내용은 저장하지 않습니다.

셀에 내용을 삽입하려면 다음을 추가합니다.divCSS:

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

추가할 필요도 있습니다.position: relative세포로.

이제 위에 말한 디브에 실제 내용을 넣을 수 있습니다.

https://jsfiddle.net/vensdvvb/

여기 있습니다.

http://jsfiddle.net/damsarabi/gwAdA/

디스플레이가 테이블 셀이기 때문에 너비: 100px는 사용할 수 없습니다.그러나 Max-width: 100px를 사용할 수 있습니다.그러면 상자가 100cm를 넘지 않게 됩니다. 그러나 overflow를 추가해야 합니다. 다른 셀로 연결된 부분이 피를 흘리지 않도록 하려면 hidden(숨김)이 필요합니다.화이트 스페이스를 추가할 수도 있습니다. 높이가 증가하지 않도록 하려면 랩을 하세요.

언급URL : https://stackoverflow.com/questions/10525744/css-table-cell-equal-width