Làm giả chiều rộng tối thiểu trên cột bảng

Làm giả chiều rộng tối thiểu trên cột bảng

Dấu thời gian: ngày 10 tháng 2023 năm 10 11:XNUMX sáng
Giả mạo độ rộng tối thiểu trên một cột trong bảng PlatoBlockchain Data Intelligence. Tìm kiếm dọc. Ái.

Điều tốt đẹp <table> thẻ là HTML ngữ nghĩa nhất để hiển thị dữ liệu dạng bảng. Nhưng tôi thấy rất khó để kiểm soát cách trình bày bảng, đặc biệt là độ rộng cột trong môi trường năng động, nơi bạn có thể không biết có bao nhiêu nội dung được đưa vào mỗi ô của bảng. Trong một số trường hợp, một cột siêu rộng trong khi các cột khác bị thu hẹp lại. Những lần khác, chúng tôi nhận được chiều rộng bằng nhau, nhưng phải trả giá bằng một cột chứa nhiều nội dung hơn và cần nhiều không gian hơn.

Nhưng tôi đã tìm thấy một giải pháp thay thế thủ thuật CSS giúp mọi thứ dễ dàng hơn một chút. Đó là những gì tôi muốn cho bạn thấy trong bài viết này.

Vấn đề

Trước tiên, chúng ta cần hiểu cách trình duyệt xử lý bố cục. Chúng ta có table-layout trong CSS để xác định cách một bảng sẽ phân phối chiều rộng cho mỗi cột của bảng. Nó nhận một trong hai giá trị:

  • auto (Default)
  • fixed

Hãy để chúng tôi bắt đầu với một bảng mà không xác định bất kỳ độ rộng nào trên các cột của nó. Nói cách khác, chúng tôi sẽ để trình duyệt quyết định độ rộng cho mỗi cột bằng cách áp dụng table-layout: auto trên đó trong CSS. Như bạn sẽ nhận thấy, trình duyệt làm tốt nhất với thuật toán mà nó có để phân chia toàn bộ chiều rộng có sẵn giữa mỗi cột.

Nếu chúng ta hoán đổi bố cục bảng tự động với table-layout: fixed, thì trình duyệt sẽ chỉ chia toàn bộ dung lượng có sẵn cho tổng số cột, sau đó áp dụng giá trị đó làm chiều rộng cho mỗi cột:

Nhưng nếu chúng ta muốn kiểm soát độ rộng của các cột thì sao? Chúng ta có <colgroup> yếu tố để giúp đỡ! Nó bao gồm cá nhân <col> chúng ta có thể sử dụng để chỉ định chiều rộng chính xác mà chúng ta cần cho mỗi cột. Hãy xem cách nó hoạt động với table-layout: auto:

Tôi đã nội tuyến các kiểu để minh họa.

Trình duyệt không tôn trọng độ rộng nội tuyến vì chúng vượt quá dung lượng bảng có sẵn khi được thêm vào. Kết quả là, bảng chiếm không gian từ các cột để có thể nhìn thấy tất cả các cột. Đây là hành vi mặc định hoàn toàn tốt.

Làm thế nào để <colgroup> làm việc với table-layout: fixed. Hãy cùng tìm hiểu:

Điều này không tốt chút nào. Chúng ta cần cột có nhiều nội dung uốn cong một chút trong khi vẫn duy trì chiều rộng cố định cho các cột còn lại. cố định table-layout giá trị tôn trọng chiều rộng - nhưng nhiều đến mức nó chiếm hết không gian của cột cần nhiều không gian nhất… điều này là không nên đối với chúng tôi.

Điều này có thể dễ dàng được giải quyết nếu chúng ta chỉ có thể thiết lập một min-width trên cột thay vì một width. Bằng cách đó, cột sẽ nói, "Tôi có thể cung cấp cho tất cả các bạn một số chiều rộng của tôi cho đến khi chúng ta đạt đến giá trị tối thiểu này." Sau đó, bảng sẽ chỉ làm tràn vùng chứa của nó và cung cấp cho người dùng một cuộn ngang để hiển thị phần còn lại của bảng. Nhưng chẳng may, min-width trên các cột bảng không được tôn trọng bởi <col> thành phần.

Giải pháp

Giải pháp là giả mạo một min-width và chúng ta cần phải có một chút sáng tạo để làm điều đó.

Chúng ta có thể thêm một khoảng trống <col> như cột thứ hai cho chúng tôi <colgroup> trong HTML và áp dụng một colspan thuộc tính trên cột đầu tiên để cột đầu tiên chiếm không gian cho cả hai cột:


<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

Lưu ý rằng tôi đã thêm các lớp thay cho các kiểu nội tuyến từ ví dụ trước. Ý tưởng tương tự vẫn được áp dụng: chúng tôi đang áp dụng chiều rộng cho mỗi cột.

Bí quyết là mối quan hệ giữa cái đầu tiên <col> và giây trống rỗng <col>. Nếu chúng ta áp dụng chiều rộng cho cái đầu tiên <col> (nó là 200px trong đoạn mã trên), thì cột thứ hai sẽ bị chiếm dụng khi bố cục bảng cố định phân chia không gian có sẵn để phân bổ cho các cột. Nhưng chiều rộng của cột đầu tiên (200px) được tôn trọng và giữ nguyên vị trí.

Võngà! chúng tôi có một giả min-width đặt trên một ô của bảng. Ô đầu tiên uốn cong khi không gian có sẵn thay đổi và bảng tràn ra để cuộn ngang đúng như chúng ta mong đợi.

(Tôi đã thêm một chút định vị dính đến cột đầu tiên ở đó.)

Khả Năng Tiếp Cận

Chúng ta đừng hoàn toàn quên khả năng tiếp cận ở đây. Tôi chạy bảng thông qua NVDA trên Windows và VoiceOver trên macOS và nhận thấy rằng tất cả năm cột đều được thông báo, ngay cả khi chúng tôi chỉ sử dụng bốn cột trong số chúng. Và khi cột đầu tiên được lấy nét, nó sẽ thông báo, "Cột một đến hai". Không hoàn toàn sang trọng nhưng cũng không khiến ai đó lạc lối. Tôi tưởng tượng chúng ta có thể ném một aria-hidden thuộc tính trên cột không sử dụng, nhưng cũng nên biết rằng ARIA không phải là giải pháp thay thế cho HTML kém.

Tôi sẽ thừa nhận, điều này cảm thấy một chút, um, hacky. Nhưng nó hoạt động! Hãy cho tôi biết nếu bạn có cách tiếp cận khác trong phần nhận xét... hoặc biết bất kỳ sự nhầm lẫn nào mà "vụ hack" này có thể mang lại cho người dùng của chúng tôi.

Dấu thời gian:

Thêm từ Thủ thuật CSS