Cách đặt chiều rộng cột càng nhỏ càng tốt?

Question

Tôi đang cố gắng đặt ba cột cuối cùng càng nhỏ càng tốt vì chúng chỉ giữ biểu tượng/liên kết cho hành động.

Tôi cũng muốn các cột văn bản lớn có chiều rộng còn lại càng nhiều càng tốt.

Đây là những gì tôi đã có thể tìm thấy, nhưng đã không làm việc cho tôi:

Two columns table : one as small as possible, the other takes the rest

Giải pháp này không làm việc cho tôi, vì tôi có nhiều cột mà tôi muốn đưa lên càng nhiều không gian càng tốt, vì vậy tôi không thể đặt bất kỳ ai trong số chúng thành chiều rộng = 100%.

force column size to smallest possible

tôi đã cố gắng sử dụng độ dài tương đối (width = "*"), nhưng nó dường như không có hiệu lực. Có lẽ đó là vì tôi đã không đặt bất kỳ độ rộng trước vì vậy không có 'chiều rộng còn lại' để phân phối ra?

HTML:

<table> 
    <colgroup class='data' span='5'> 
    <col class='date' span='1'/> 
    <col class='id' span='1'/> 
    <col class='title' span='1'/> 
    <col class='status' span='1'/> 
    <col class='description' span='1'/> 
    </colgroup> 
    <colgroup class='action' span='3'> 
    <col class='show' span='1'/> 
    <col class='edit' span='1'/> 
    <col class='delete' span='1'/> 
    </colgroup> 
    <tr> 
    <th>Date</th> 
    <th>ID</th> 
    <th>Title</th> 
    <th>Status</th> 
    <th>Description</th> 
    <th colspan='3'></th> 
    </tr> 

    <tr> 
    <td class='date'>medium</td> 
    <td class='id'>medium</td> 
    <td class='title'>large</td> 
    <td class='status'>medium</td> 
    <td class='description'>large</td> 
    <td class='show'>small</td> 
    <td class='edit'>small</td> 
    <td class='delete'>small</td> 
    </tr> 
</table> 

CSS:

table { 
    width: 100%; 
} 

table td.title, td.description { 
    text-align: left; 
} 

table td.date, td.id, td.status { 
text-align: center; 
} 

table td.show, td.edit, td.delete { 
} 

table colgroup.action col { 
    width:"1*"; 
} 

table colgroup.data col { 
    width:"*"; 
} 

Vì vậy, trong thứ tự ưu tiên:

• bảng kéo dài toàn bộ chiều rộng của thùng phụ huynh

• cuối cùng thre e cột biểu tượng/hành động được càng nhỏ càng tốt mà không cắt

• các cột với dữ liệu 'lớn' (tiêu đề lớp và mô tả) nên mất càng nhiều các không gian còn lại càng tốt

• các cột với dữ liệu 'trung bình' phải là kích thước nội dung của chúng với một số lề trên cả hai mặt (tôi không nhớ chỉ ném một chiều rộng cố định nếu quá khó để thực hiện việc này)

Tôi không cần các thẻ colgroup và col, nhưng tôi chỉ để chúng ở đây trong trường hợp chúng có thể hữu ích. Tôi đã thử hoán vị khác nhau của việc sử dụng và không sử dụng chúng, nhưng vẫn không thể có vẻ để làm cho nó hoạt động. Tôi cũng nghĩ về việc sử dụng phần trăm cho các cột dữ liệu, nhưng tôi muốn trình duyệt xác định chiều rộng dựa trên nội dung thực tế hơn là tôi áp đặt các quy tắc được xác định trước có thể không tối ưu.

Answer 1

Để trả lời một trong những yêu cầu của bạn:

ba cột biểu tượng/hành động cuối cùng là càng nhỏ càng tốt mà không bất kỳ cắt

Để làm điều này, tôi sẽ float các td s hoặc đặt chúng thành display:inline-block;

Nếu bạn biết kích thước của biểu tượng bạn đang sử dụng, bạn có thể đặt chiều rộng trên th abov e các biểu tượng (mà tôi sẽ gọi class="icons").

Nếu bạn không biết chiều rộng, bạn có thể tính toán bằng cách sử dụng một số jQuery.

var a = $('td.show').width(); 
var b = $('td.edit').width(); 
var c = $('td.delete').width(); 

$('.icons').css('width', a+b+c+6+"px"); 

Ví dụ: http://jsfiddle.net/KQs2K/1/

tắm cần thiết để pad ra các bit biên giới Tôi đã ném trong ví dụ

Note 6px: những td s sẽ stack khi kích thước màn hình được thực nhỏ.

Answer 2

Đối với các cột bạn muốn thu nhỏ, thiết lập chiều rộng tới 1 px:

table { 
    width: 100%; 
} 

th, td { 
    border: 1px solid #eee; 
} 

td.title, td.description { 
    text-align: left; 
} 

td.date, td.id, td.status { 
    padding: 0 10px; 
    text-align: center; 
    width: 1px; 
} 

td.show, td.edit, td.delete { 
    width: 1px; 
} 

Sau đó, bạn có thể nhận được thoát khỏi những colgroups hoàn toàn.

Xem demo here.

Nhân tiện, bạn có thể cân nhắc sử dụng CSS flexible boxes để thay thế.