Tôi cần hiển thị dữ liệu dạng bảng bằng cách sử dụng table, nhưng nó sẽ nằm trong bố cục lỏng; Tôi muốn có một nó lấp đầy toàn bộ chiều rộng có sẵn nhưng không mở rộng chiều ngang vượt quá chiều rộng màn hình tối đa, chẳng hạn như các body không nhận được một thanh cuộn ngang. Thay vào đó, các phần tử quá rộng td sẽ có thanh cuộn.Làm cách nào để giới hạn chiều rộng bảng thành phần tử chứa (hoặc màn hình)?
Trong ví dụ này có DATA trong table, các table có border:1px solid black và đầu ra phải để dễ dàng phân tích khi đường ống từ curl cũng (vì thế white-space:pre); div chỉ là trình trợ giúp bố cục CSS bình thường, nếu có thể, hãy loại bỏ điều đó!
Phần quan trọng là, không phải là loại bố cục pixel cố định và table phải nhỏ hơn chiều rộng có sẵn trong trường hợp dữ liệu không cần nhiều chỗ. Vì vậy, để tổng hợp nó lên, một bảng đơn giản mà không nhận được rộng hơn so với màn hình. Lý tưởng nhất là table sẽ chỉ kéo giãn phần tử của cha mẹ cho đến khi max-width của phần tử kèm theo đó đạt được và sau đó không rộng hơn.
Trong Chrome, với thứ tôi coi là hack ác, tôi phải giữ table ở độ rộng tối đa có sẵn và hiển thị thanh cuộn trên td nếu cần. Tuy nhiên điều này không làm việc cho FF, cũng không phải là giải pháp mà một cái gì đó mà có thể được coi là một chính xác.
Tiếp theo ví dụ về có thể được tìm thấy tại https://hydra.geht.net/table-quirx.html một lúc:
<head>
<title>Obey max-width for table</title>
<style>
.nw { white-space:nowrap }
.quirx div { width:100%; max-width:100%; white-space:pre }
.quirx td { max-width:90px; border:1px solid black }
.quirx td+td { max-width:500px; overflow:auto }
table.quirx { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse }
td { align:left; max-width:100% }
</style>
</head>
<body>
<table summary="" class="quirx"><tr><td colspan="3">
Just some info
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</td></tr></table>
</body>
</html>
Lưu ý rằng "colspan = 3" là không có lỗi ở đây, trong ứng dụng của tôi đôi khi một cột thứ ba có thể xuất hiện, điều này có thể không được biết tại thời điểm tiêu đề table là đầu ra. (Một số điều phong cách là không cần thiết, quá.)
Bí quyết ở trên là, rằng 's max-widthtd cùng có kích thước nhỏ hơn so với màn hình thông thường (590px) và table sau đó được kéo dài đến width nhất định, mà là 100% . Vì td s không kéo dài ra ngoài màn hình, thuộc tính overflow bên trong có thể hoạt động như mong đợi. Tuy nhiên trong FF nó không hoạt động theo cách này, không phải với width cũng không phải với max-width (có thể là do inline-status của chúng). Trong Chrome a width:100% hoặc tương tự không hoạt động trên td cũng như các yếu tố tr. Lưu ý rằng với max-width một bố cục bảng dễ chịu hơn với width (Tôi không hiểu sự khác biệt đó).
Bên cạnh những lỗi này chỉ hoạt động trong Chrome, lỗi khác là, rằng table sử dụng toàn màn hình rộng thậm chí nếu điều đó là không cần thiết nếu chỉ có nhỏ dữ liệu để hiển thị.
Một số lưu ý về điều đó tất cả:
- Tôi nghĩ rằng đây đây là một điều rất cơ bản và tôi đang bối rối vì sao có vẻ như rất khó để thể hiện với CSS
- Mục tiêu là để giữ cho nó miễn phí của bất kỳ Javascript, vì vậy chỉ CSS với hacks
- người dùng có thể thay đổi kích thước cửa sổ, ví dụ từ 800px đến 1920px hoặc thậm chí rộng hơn, và do đó chiều rộng của
tablesẽ tự động làm theo (không có JavaScript) - Nó sẽ hiển thị tốt trên văn bản trình duyệt dựa trên như
Lynxvàw3m, quá - Output sẽ không quá lộn xộn để dễ dàng phân tích khi đường ống từ
curl - Nó sẽ hiển thị nhiều hơn hoặc ít hơn đúng trên chính 4 (IE, FF, Chrome, Safari)
- Nó không có trách nhiệm phá vỡ những người khác (nó có thể có lỗi hiển thị, nhưng nội dung không được ẩn)
Tôi thực sự không có ý tưởng làm thế nào để lưu trữ đó. Có lẽ đó là một câu hỏi thường gặp, nhưng tôi không thể phát hiện ra một giải pháp cho bản thân mình.
Điều này hữu ích. Tôi đang gặp sự cố và bố cục bảng dường như đang được phát. Cảm ơn – huyz
Điều này cực kỳ hữu ích, cảm ơn anh chàng –