Bố cục bảng: cố định bỏ qua chiều rộng tối thiểu của td

Question

Tôi có một dự án yêu cầu bảng bao gồm cả cột có chiều rộng cố định và chiều rộng linh hoạt.

Một số cột cần phải rộng 80px luôn, bất kể chiều rộng của trình duyệt là bao nhiêu.

Phần còn lại của các cột cần phải có chiều rộng linh hoạt, nhưng tất cả đều có chiều rộng bằng nhau, với chiều rộng tối thiểu là 75px;

Bằng cách thêm bố cục bảng: cố định; đến bảng Tôi có thể nhận được các cột có chiều rộng linh hoạt cho tất cả đều có chiều rộng bằng nhau, BUT thì bảng bỏ qua thuộc tính chiều rộng tối thiểu của td.

Nếu tôi xóa bố cục bảng: cố định, chiều rộng tối thiểu hoạt động nhưng các chiều rộng linh hoạt đều có chiều rộng khác nhau (dựa trên độ dài của văn bản mà chúng chứa).

Số lượng cột khác nhau dựa trên dữ liệu được lấy từ db.

Tôi đã đưa một ví dụ về bảng với bàn bố trí: cố định và min-width trên jsfiddle: http://jsfiddle.net/7d2Uj/

Bất kỳ ý tưởng làm thế nào để có được min-width để làm việc trong tình huống này, hay tại sao điều này xảy ra ?

Answer 1

Bạn cần sử dụng width, không phải min-width cho các cột có chiều rộng cố định và bạn nên đặt chiều rộng của các cột còn lại thành phần trăm dựa trên số cột. Trong trường hợp của bạn, bạn có 6 cột, vì vậy tôi đặt nó thành 16.66%.

dụ làm việc: http://jsfiddle.net/6vw66/

Answer 2

workaround của tôi cho điều này là để siết chặt bàn đến nơi cột gần như trùng nhau, kiểm tra độ rộng bảng tại thời điểm đó, và thiết lập min-width của <table> yếu tố chính để giá trị đó . Kỹ thuật này cũng hữu ích nếu bạn có bố trí cố định với một cột có thể mở rộng vì nếu không thì cột mở rộng sẽ biến mất hoàn toàn khi cửa sổ co lại.

Ví dụ: http://jsfiddle.net/KTCfs/