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 %가됩니다.

트릭은 table-layout: fixed;각 셀의 너비와 너비 를 사용 하여 트리거하는 것입니다. 여기서는 2 %입니다. 그러면 다른 표 알고리즘 이 트리거됩니다.이 표는 브라우저가 표시된 크기를 존중하기 위해 매우 열심히 노력합니다.
Chrome으로 테스트하십시오 (필요한 경우 IE8). 최근 Safari에서는 괜찮지 만이 트릭과의 호환성을 기억할 수 없습니다.

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의 Safari 6에 유의하십시오. table-layout: fixed; 잘못되었습니다 (또는 다른 브라우저와는 매우 다르거 나 CSS 브라우저가 다릅니다. 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>

div가 테이블처럼 작동하도록 만드는 데 관련된 모든 문제를 살펴보십시오. 그들은 테이블 레이아웃을 모방하기 위해 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>

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

여기 있습니다 :

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

표시는 테이블 셀이므로 width : 100px를 사용할 수 없습니다. 그러나 최대 너비 : 100px를 사용할 수 있습니다. 그러면 상자가 100px보다 커지지 않습니다. 그러나 contect가 다른 셀에 번지지 않도록 overflow : hidden을 추가해야합니다. 높이를 늘리지 않으려면 공백을 추가하십시오.

이것은 표 셀 스타일을로 설정 width: auto하고 내용을 비워서 수행 할 수 있습니다 . 이제 열의 너비가 동일하지만 내용이 없습니다.

셀에 내용을 삽입하려면 divCSS 로 with를 추가하십시오 .

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

또한 position: relative셀 에 추가 해야합니다.

이제 실제 내용을 위에서 설명한 div에 넣을 수 있습니다.

https://jsfiddle.net/vensdvvb/