Set up chiều rộng của các cột trong table bằng nhau chỉ bằng một thuộc tính trong css (Set column of table same width by css)
https://itlovedesign.blogspot.com/2019/05/set-up-chieu-rong-cua-cac-cot-trong.html
Bài viết này mình xin demo 1 trick để set up chiều rộng của thẻ td trong table html5 chỉ bằng một thuộc tính.
Ở đây ví dụ mình có cái bảng viết bằng code html5 giao diện như sau
Có tổng cộng 3 cột nhưng mà mỗi cột thì có text với số kí tự khác nhau làm cho chiều rộng của các cột trong bảng không bằng nhau
Để giải quyết vụ này, ban đầu mình sẽ gán thêm border cho các bạn dễ nhận thấy
Ta set up border cho mỗi dòng, cột
Kết quả trình duyệt
Kết quả trình duyệt
Ở đây ví dụ mình có cái bảng viết bằng code html5 giao diện như sau
Có tổng cộng 3 cột nhưng mà mỗi cột thì có text với số kí tự khác nhau làm cho chiều rộng của các cột trong bảng không bằng nhau
Để giải quyết vụ này, ban đầu mình sẽ gán thêm border cho các bạn dễ nhận thấy
Ta set up border cho mỗi dòng, cột
Kết quả trình duyệt
Nhìn cái bảng không đẹp, mình sẽ chỉnh cho nét mỏng lại bằng css
Giờ đến phần chia đều cột, mình sử dụng thuộc tính table-layout và set giá trị là fixed
Nhó là phải set width cho nó nữa . Kết quả trình duyệt
Code full ở đây
Chúc bạn thành công :)
