Autowidth kolom tabel CSS

Diberikan berikut ini bagaimana cara membuat ukuran otomatis kolom terakhir saya ke isinya? (Kolom terakhir harus menyesuaikan lebar-otomatis ke konten. Misalkan saya hanya memiliki 1 elemen li itu harus menyusut vs. memiliki 3 elemen li dll):

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

Berikut ini akan menyelesaikan masalah Anda:

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

Solusi Berbasis Kelas yang Fleksibel

Dan solusi yang lebih fleksibel adalah membuat .fitwidthkelas dan menerapkannya ke kolom apa pun yang Anda inginkan untuk memastikan isinya pas dalam satu baris:

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

Dan kemudian di HTML Anda:

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

Jika Anda ingin memastikan bahwa baris terakhir tidak terbungkus dan dengan demikian ukurannya seperti yang Anda inginkan, lihat

td {
 white-space: nowrap;
}

Anda dapat menentukan lebar semua kecuali sel tabel terakhir dan menambahkan tata letak tabel: tetap dan lebar ke tabel.

Anda bisa mengatur

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

(atau setel ini untuk TD terakhir seperti yang disarankan Sander).

Ini memaksa inline-LIs untuk tidak putus. Sayangnya ini tidak mengarah pada kalkulasi lebar baru dalam UL yang memuat (dan TD induk ini), dan oleh karena itu tidak mengubah ukuran TD terakhir secara otomatis.

Artinya: jika elemen sebaris tidak memiliki lebar tertentu, lebar TD selalu dihitung secara otomatis terlebih dahulu (jika tidak ditentukan). Kemudian konten sebarisnya dengan lebar terhitung ini akan dirender dan white-space-properti diterapkan, memperluas kontennya di luar batas yang dihitung.

Jadi saya kira itu tidak mungkin tanpa elemen dalam TD terakhir dengan lebar tertentu.

gunakan lebar otomatis dan min atau maks seperti ini:

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