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): ระวัง Safari 6 บน OS X มัน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>

ดูปัญหาทั้งหมดที่อยู่รอบ ๆ ซึ่งพยายามทำให้ 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/

คุณไม่สามารถใช้ความกว้าง: 100px เนื่องจากจอแสดงผลเป็นเซลล์แบบตาราง อย่างไรก็ตามคุณสามารถใช้ความกว้างสูงสุด: 100px จากนั้นกล่องของคุณจะไม่ใหญ่กว่า 100px แต่คุณต้องเพิ่มโอเวอร์โฟลว์: ซ่อนเพื่อให้แน่ใจว่าส่วนที่ไม่ถูกเลือดออกไปยังเซลล์อื่น คุณสามารถเพิ่ม white-space: nowrap หากคุณต้องการป้องกันไม่ให้ความสูงเพิ่มขึ้น

สิ่งนี้สามารถทำได้โดยการตั้งค่าสไตล์ของตารางเซลล์เป็นwidth: autoและเนื้อหาว่างเปล่า ขณะนี้คอลัมน์มีความกว้างเท่ากัน แต่ไม่มีเนื้อหา

ในการแทรกเนื้อหาลงในเซลล์ให้เพิ่มdivด้วย css:

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

คุณต้องเพิ่มposition: relativeไปยังเซลล์

ตอนนี้คุณสามารถใส่เนื้อหาจริงลงใน div ที่พูดถึงข้างต้น

https://jsfiddle.net/vensdvvb/