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( table )에 너비를 고정 할 수 있습니다 . 그렇지 않으면 평소와 같이 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>

Look at all the issues surrounding trying to make divs perform like tables. They had to add table-xxx to mimic table layouts

Tables are supported and work very well in all browsers. Why ditch them? the fact that they had to mimic them is proof they did their job and well.

In my opinion use the best tool for the job and if you want tabulated data or something that resembles tabulated data tables just work.

Very Late reply I know but worth voicing.

---

this will work for everyone

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

This will also work for table data created by iteration

---

Here you go:

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

You cannot use width: 100px, because the display is table-cell. You can however use Max-width: 100px. then your box will never get bigger than 100px. but you need to add overflow:hidden to make sure the contect don't bleed to other cells. you can also add white-space: nowrap if you wish to keep the height from increasing.

---

This can be done by setting table-cell style to width: auto, and content empty. The columns are now equal-wide, but holding no content.

To insert content to the cell, add an div with css:

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

You also need to add position: relative to the cells.

Now you can put the actual content into the div talked above.

https://jsfiddle.net/vensdvvb/

참고URL : https://stackoverflow.com/questions/10525744/css-table-cell-equal-width