คอลัมน์ตาราง CSS อัตโนมัติ

ระบุต่อไปนี้ฉันจะสร้างขนาดอัตโนมัติของคอลัมน์สุดท้ายให้เป็นเนื้อหาได้อย่างไร (คอลัมน์สุดท้ายควรปรับขนาดความกว้างอัตโนมัติให้กับเนื้อหาสมมติว่าฉันมีองค์ประกอบ Li เพียง 1 ชิ้นเท่านั้นที่ควรลดขนาดเทียบกับการมี 3 องค์ประกอบ li เป็นต้น):

            <table cellspacing="0" cellpadding="0" border="0">
            <thead><!-- universal table heading -->
                <tr>
                    <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
                    <td class="tc">Type</td>
                    <th>File</th>
                    <th>Sample</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td class="last">
                        <ul class="actions">
                            <li><a class="iconStats" href="#">Statystyki</a></li>
                            <li><a class="iconEdit" href="#">Edytuj</a></li>
                            <li><a class="iconDelete" href="#">Usuń</a></li>

                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

Css:

table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}

สิ่งต่อไปนี้จะช่วยแก้ปัญหาของคุณ:

td.last {
    width: 1px;
    white-space: nowrap;
}

โซลูชันที่ยืดหยุ่นตามคลาส

และวิธีแก้ปัญหาที่ยืดหยุ่นกว่าคือการสร้าง.fitwidthคลาสและนำไปใช้กับคอลัมน์ใด ๆ ที่คุณต้องการเพื่อให้แน่ใจว่าเนื้อหาของพวกเขาพอดีในบรรทัดเดียว:

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

จากนั้นใน HTML ของคุณ:

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>

หากคุณต้องการตรวจสอบให้แน่ใจว่าแถวสุดท้ายไม่ได้พันและมีขนาดตามที่คุณต้องการให้ดูที่

td {
 white-space: nowrap;
}

คุณสามารถระบุความกว้างของเซลล์ตารางทั้งหมดยกเว้นเซลล์สุดท้ายและเพิ่มเค้าโครงตาราง: คงที่และความกว้างให้กับตาราง

คุณสามารถตั้งค่า

table tr ul.actions {margin: 0; white-space:nowrap;}

(หรือตั้งค่านี้สำหรับ TD สุดท้ายตามที่ Sander แนะนำแทน)

สิ่งนี้บังคับให้ inline-LI ไม่แตก น่าเสียดายที่สิ่งนี้ไม่ได้นำไปสู่การคำนวณความกว้างใหม่ใน UL ที่มีอยู่ (และ TD แม่นี้) ดังนั้นจึงไม่ได้ปรับขนาด TD สุดท้ายโดยอัตโนมัติ

ซึ่งหมายความว่า: หากองค์ประกอบแบบอินไลน์ไม่มีความกว้างที่กำหนดความกว้างของ TD จะถูกคำนวณโดยอัตโนมัติก่อนเสมอ (หากไม่ได้ระบุไว้) จากนั้นเนื้อหาแบบอินไลน์ที่มีความกว้างที่คำนวณได้นี้จะถูกแสดงผลและใช้white-space-property โดยยืดเนื้อหาเกินขอบเขตที่คำนวณได้

ดังนั้นฉันเดาว่ามันเป็นไปไม่ได้หากไม่มีองค์ประกอบภายใน TD สุดท้ายที่มีความกว้างเฉพาะ

ใช้ความกว้างอัตโนมัติและต่ำสุดหรือสูงสุดดังนี้:

td {
max-width:50px;
width:auto;
min-width:10px;
}