Độ rộng tự động của cột bảng CSS

Với những điều sau đây, làm cách nào để tạo kích thước cột cuối cùng của tôi tự động cho nội dung của nó? (Cột cuối cùng sẽ tự động thay đổi kích thước chiều rộng cho nội dung. Giả sử tôi chỉ có 1 phần tử li, nó sẽ thu nhỏ lại so với có 3 phần tử li, v.v.):

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

Những điều sau đây sẽ giải quyết vấn đề của bạn:

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

Giải pháp dựa trên lớp linh hoạt

Và một giải pháp linh hoạt hơn là tạo một .fitwidthlớp và áp dụng lớp đó cho bất kỳ cột nào bạn muốn để đảm bảo nội dung của chúng nằm gọn trên một dòng:

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

Và sau đó trong HTML của bạn:

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

Nếu bạn muốn đảm bảo rằng hàng cuối cùng không bị quấn và do đó có kích thước theo cách bạn muốn, hãy xem

td {
 white-space: nowrap;
}

Bạn có thể chỉ định chiều rộng của tất cả trừ các ô cuối cùng trong bảng và thêm bố cục bảng: cố định và chiều rộng vào bảng.

Bạn có thể đặt

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

(hoặc đặt điều này cho TD cuối cùng như Sander đề xuất thay thế).

Điều này buộc các LI nội tuyến không bị vỡ. Thật không may, điều này không dẫn đến một phép tính chiều rộng mới trong UL chứa (và TD cha này), và do đó không tự động kích thước TD cuối cùng.

Điều này có nghĩa là: nếu một phần tử nội tuyến không có chiều rộng nhất định, thì chiều rộng của TD luôn được tính toán tự động trước (nếu không được chỉ định). Sau đó, nội dung nội tuyến của nó với chiều rộng được tính toán này sẽ được hiển thị và white-space-property được áp dụng, kéo dài nội dung của nó ra ngoài ranh giới được tính toán.

Vì vậy, tôi đoán không thể thực hiện được nếu không có một phần tử trong TD cuối cùng với chiều rộng cụ thể.

sử dụng tự động và chiều rộng tối thiểu hoặc tối đa như sau:

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