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)

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

Nhìn cái bảng không đẹp, mình sẽ chỉnh cho nét mỏng lại bằng css

Kết quả trình duyệt

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 :)