เซลล์ตารางที่มีขนาดเท่ากันเพื่อเติมเต็มความกว้างทั้งหมดของตารางที่มี

มีวิธีการใช้ HTML / CSS (ที่มีขนาดสัมพัทธ์) เพื่อทำให้แถวของเซลล์ยืดความกว้างทั้งหมดของตารางภายในตารางหรือไม่?

<table width="100%">เซลล์ที่ควรจะมีความกว้างเท่ากันและขนาดที่โต๊ะด้านนอกยังเป็นแบบไดนามิกที่มี

ปัจจุบันถ้าฉันไม่ระบุขนาดคงที่ เซลล์จะปรับขนาดอัตโนมัติเพื่อให้พอดีกับเนื้อหา

คุณไม่จำเป็นต้องตั้งค่าความกว้างเฉพาะสำหรับเซลล์ แต่ก็table-layout: fixedเพียงพอที่จะกระจายเซลล์อย่างเท่าเทียมกัน

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}

<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

โปรดทราบว่าสำหรับtable-layoutการทำงานองค์ประกอบสไตล์ตารางต้องมีชุดความกว้าง (100% ในตัวอย่างของฉัน)

เพียงใช้ความกว้างเปอร์เซ็นต์และเค้าโครงตารางคงที่ :

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

ด้วย

table { table-layout: fixed; }
td { width: 33%; }

เค้าโครงตารางคงที่มีความสำคัญมิฉะนั้นเบราว์เซอร์จะปรับความกว้างตามที่เห็นว่าเหมาะสมหากเนื้อหาไม่พอดีเช่นความกว้างเป็นข้อเสนอแนะที่ไม่ใช่กฎที่ไม่มีเค้าโครงตารางที่ตายตัว

เห็นได้ชัดว่าปรับ CSS ให้เข้ากับสถานการณ์ของคุณซึ่งโดยปกติหมายถึงการใช้สไตล์กับตารางที่มีคลาสที่กำหนดหรืออาจใช้ ID ที่กำหนด

ใช้table-layout: fixedเป็นสถานที่ให้บริการสำหรับtableและwidth: calc(100%/3);สำหรับtd( สมมติว่ามี 3 td's ) กับทั้งสองคุณสมบัติตั้งค่าเซลล์ตารางจะเท่ากับขนาด

อ้างถึงการสาธิต