Một vài thủ thuật làm việc với các dạng layout

Tram Ho

Chào mọi người, mình sẽ chia sẻ thêm một trick thú vị nữa về layout.

Bây giờ mình sẽ tái hiện lại chiếc table mình làm hôm trước. Anh em review phát xem có gọn gàng không nhé.

1. Table border radius has border

Thông thường, để dựng ra một cái table bo tròn 4 góc bạn sẽ nghĩ đến việc dùng border-radius. Đúng rồi, vì làm tròn thì chỉ có nó thôi, nhưng có người sẽ radius nó ở table hoặc selector đến td first / last của tr đầu tiên và cuối cùng rồi radius… Có thể một vài cách nữa nhưng nó sẽ rườm rà và kết quả là cái table vẫn không được đẹp mắt và không thực sự smooth như design. Bởi vì table và các cell (th, td) mặc định là display: table, table-cel nên việc can thiệp box-model là mạo hiểm ở các browser khác nhau.

Ý tưởng thực hiện:

  • Bọc table bằng một div để làm việc bo tròn và tạo border
  • Đối với những cell có border thì nên kết hợp pseudo-class để tối ưu và tránh xảy ra tình trạng huynh đệ tương tàn (css bị override).

Đấy, mình chỉ demo một lần cho các bạn xem. Cách này cũng simple, code ngắn gọn, không bị trùng lặp styled. Để mình gửi luôn cái link demo cho mọi người xem:

Hiện tại codepen đang bị lỗ hổng bảo mật gì đó, vào cứ bị dính capcha hơi khó chịu nên giờ mình chuyển sang tool này, khá nhanh, nhẹ

2. Table has border using rowspan

Trường hợp nữa nếu table có thêm rowspan thì chúng ta xử lý việc border thế nào để chúng không bị trùng lặp nhau. Việc cho border-left hay border-right là đơn giản rồi. Còn làm thế nào để selector đúng những cell cần set đường viền ngang thì mới là vấn đề.

Chỗ border nét đứt để dễ phân biệt selector

Ý tưởng thực hiện:

  • Dựng 1 table như bên trên, selector đến tất cả các cell trừ cell cuối và set border-left.
  • Selector đến các cell (trừ cell của hàng cuối cùng và những cell có attribute là [rowspan] row vị trí thứ n tính từ last).

Xem phim Mắt biếc 4K Vietsub online

Nếu không xem được trực tiếp thì download tại Mắt biếc

Tổng kết

Đó là 2 dạng table mà chúng ta thường gặp, dạo này mình hay code bên phía Admin, nên chắc sẽ còn chia sẻ cho anh em những tricks hay về table ở những tập sau. Mọi người cùng đón chờ và ủng hộ nhé và nếu có tricks gì thú vị hay cách khác tối ưu đừng ngần ngại chia sẻ. Cảm ơn và chúc mọi người mùa remote nhiều kỷ niệm, giữ gìn sức khoẻ và đề cao ý thức chung chứ mình nhớ công ty lắm rồi.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo