CSS và text-overflow trong một ô trong bảng

Question

Tôi có một bàn nơi chiều rộng của tế bào là tỷ lệ phần trăm và tôi muốn sử dụng text-overflow: ellipsis để ẩn đường dài của văn bản:

http://jsfiddle.net/Fm5bM/

Trong Ví dụ, dấu ba chấm hoạt động tốt trong một div nhưng không hoạt động trong ô. Nó vẫn phát triển và bỏ qua cả hai số width:60% và max-width:60%.

Nếu tôi thêm display:block vào ô, văn bản sẽ dừng ở mức 60% và nhận dấu ba chấm, nhưng tổng chiều rộng của ô vẫn là kích thước của toàn bộ văn bản.

http://jsfiddle.net/Fm5bM/3/

Cuối cùng, tôi muốn bàn phù hợp với màn hình. Có cách nào để làm điều đó với css tinh khiết?

Answer 1

Điều này có thể dễ dàng thực hiện bằng cách sử dụng table-layout: fixed, nhưng "hơi phức tạp" vì không có nhiều người biết về thuộc tính CSS này.

table { 
    width: 100%; 
    table-layout: fixed; 
} 

Nhìn thấy nó trong hành động ở fiddle cập nhật tại đây: http://jsfiddle.net/Fm5bM/4/