Cột bảng CSS autowidth

Question

Được cung cấp như thế nào sau đây để tôi làm cho kích thước ô cuối cùng của cột thành nội dung của nó? (Cột cuối cùng nên AutoSize-width đến nội dung Giả sử tôi chỉ có yếu tố 1 li nó nên teo vs có 3 yếu tố li vv.):

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

Answer 1

Sau đây sẽ giải quyết vấn đề của bạn:

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

Answer 2

Nếu bạn muốn chắc chắn rằng hàng cuối cùng không quấn và do đó kích thước theo cách bạn muốn nó, có một cái nhìn tại

td { 
white-space: nowrap; 
} 

Answer 3

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

Bạn có thể thiết lập

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

(hoặc thiết lập này cho TD cuối cùng như Sander đề nghị thay).

Điều này buộc nội tuyến-LI không phá 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 chứa UL (và TD cha), và do đó không tự động hóa TD cuối cùng.

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

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

Answer 4

tự động sử dụng và phút hoặc chiều rộng tối đa như thế này:

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