ปรับความกว้างของเซลล์ให้พอดีกับเนื้อหา

จากมาร์กอัปต่อไปนี้ฉันจะใช้ CSS เพื่อบังคับหนึ่งเซลล์ (เซลล์ทั้งหมดในคอลัมน์) ให้พอดีกับความกว้างของเนื้อหาภายในแทนที่จะยืดได้ (ซึ่งเป็นพฤติกรรมเริ่มต้น)

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

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

ดูภาพด้านล่างภาพแรกคือสิ่งที่มาร์กอัปสร้าง รูปที่สองคือสิ่งที่ฉันต้องการ

ฉันไม่แน่ใจว่าฉันเข้าใจคำถามของคุณหรือไม่ แต่ฉันจะเอาไปแทง JSfiddle ของตัวอย่าง

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

การตั้งค่า

max-width:100%;
white-space:nowrap;

จะแก้ปัญหาของคุณ

สำหรับฉันนี่คือ autofit ที่ดีที่สุดและปรับขนาดอัตโนมัติสำหรับตารางและคอลัมน์ (ใช้ css! สำคัญ ... เฉพาะในกรณีที่คุณทำไม่ได้)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

อย่าระบุความกว้าง css สำหรับตารางหรือสำหรับคอลัมน์ตาราง หากเนื้อหาตารางมีขนาดใหญ่กว่าขนาดหน้าจอจะเป็น

การตั้งค่าความกว้าง CSS เป็น 1% หรือ 100% ขององค์ประกอบตามข้อกำหนดทั้งหมดที่ฉันพบว่าเกี่ยวข้องกับผู้ปกครอง แม้ว่า Blink Rendering Engine (Chrome) และ Gecko (Firefox) ในขณะที่เขียนดูเหมือนว่าจะจัดการที่ 1% หรือ 100% (ทำให้คอลัมน์มีขนาดเล็กลงหรือคอลัมน์เพื่อเติมเต็มพื้นที่ว่าง) แต่ไม่รับประกันตามข้อกำหนด CSS ทั้งหมด ฉันสามารถหาวิธีทำให้มันถูกต้อง

ทางเลือกหนึ่งคือการแทนที่ตารางด้วย CSS4 flex divs:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ใช้งานได้กับเบราว์เซอร์ใหม่เช่น IE11 + ดูตารางที่ด้านล่างของบทความ

มีหลายวิธีในการทำเช่นนี้!

แก้ไขให้ถูกต้องหากฉันผิด แต่คำถามนั้นกำลังมองหาผลลัพธ์เช่นนี้

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

2 ฟิลด์แรกจะ "แบ่งปัน" หน้าที่เหลืออยู่ (หมายเหตุ: หากคุณเพิ่มข้อความลงในฟิลด์ 50% ทั้งสองจะใช้พื้นที่เพิ่มขึ้น) และฟิลด์สุดท้ายจะครองตารางอย่างต่อเนื่อง

หากคุณมีความสุขที่จะปล่อยให้ห่อข้อความคุณสามารถย้ายพื้นที่สีขาว: nowrap; สไตล์ของฟิลด์ที่ 3
จะเป็นวิธีเดียวที่จะเริ่มบรรทัดใหม่ในฟิลด์นั้น

หรือคุณสามารถตั้งค่าความยาวในฟิลด์สุดท้ายเช่น width: 150px และคงเปอร์เซ็นต์ไว้ใน 2 ฟิลด์แรก

หวังว่านี่จะช่วยได้!

ง่าย ๆ :

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>