CSS: Đặt chiều rộng tối đa trên một bảng

Question

Tôi đang tạo nhật ký ứng dụng bằng html và tôi đã gặp phải vấn đề khá khó chịu. Tôi có cách bố trí như sau:

| Action | Result | File path   | 

Ví dụ

| Copy | Success | C:\VeryVeryVeryLongF | 
|  |   | ileName.txt   | 

Cột 1 và 2 chỉ hiển thị nhãn ngắn: nội dung của họ nên ở lại trên cùng một dòng duy nhất. Mặt khác, cột 3 có thể chứa đường dẫn tệp rất dài, nên có nhiều dòng nếu chúng không thể vừa với một dòng.

Để đạt được điều này, tôi đã sử dụng white-space: nowrap; trên các cột đầu tiên và white-space: normal; word-break: break-all; vào cuối cùng. Ngoài ra, bảng có width:100%.

Điều này hoạt động tốt trong Chrome và IE, nhưng không phải trong Firefox: Tóm lại, dường như tôi không thể tìm ra cách để thông báo cho Firefox 8.0 không phóng to cột cuối cùng của bảng, thay vào đó hãy để khoảng văn bản nhiều dòng. Trong ví dụ trước của tôi, Firefox in

| Copy | Success | C:\VeryVeryVeryLongFileName.txt | 

Văn bản trong hai cột đầu tiên có thể khác nhau, vì vậy tôi không thể đặt chiều rộng theo cách thủ công và sử dụng table-layout: fixed. Tôi cũng đã thử đặt max-width trên bàn và gói nó trong một div, không có kết quả.

Xem http://jsfiddle.net/GQsFx/6/ để có ví dụ thực tế =) Làm cách nào để Firefox hoạt động giống Chrome?

Answer 1

sử dụng css này

.actions { 
width:100%; 
} 
.actions tr td:nth-child(3) { 
width:200px; 
word-wrap:break-word; 
    display:inline-block; 
} 

Answer 2

max-width là CSS2 hợp lệ nhưng chỉ được hỗ trợ trong NS7, Opera 7 và có lẽ Mozilla. Tôi không tin rằng nó được hỗ trợ trong IE 6.

Answer 3

Thử đặt width: auto;. Điều này sẽ cho cho trình duyệt để sử dụng không gian cần thiết ...

Answer 4

này nên làm việc:

.actions tr td:nth-child(3) { 
     white-space: normal; 
     word-break: break-all; 
     max-width:200px; 
    } 

Answer 5

CSS sau đây dường như để làm cho nó làm việc cho tôi. Lưu ý việc bổ sung bố cục bảng: cố định và sử dụng từ bọc: từ ngắt.

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

.actions tr td { 
    white-space: nowrap; 
} 

.actions tr td:nth-child(3) { 
    white-space:normal; 
    word-wrap: break-word; 
} 

Answer 6

Điều này có hiệu quả không? Điều này dường như làm việc với jsfiddle. Phần trăm dựa trên hai cols đầu tiên, sau đó chiều rộng tự động thứ ba, với bảng bố trí: cố định trên bảng.

http://jsfiddle.net/keithwyland/uuF9k/1/

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

.actions tr td { 
    white-space: nowrap; 
    width: 15%; 
} 

.actions tr td:nth-child(3) { 
    white-space: normal; 
    word-break: break-all; 
    word-wrap: break-word; 
    width: auto; 
}