Cách tạo bảng CSS đẹp mắt với các góc bo tròn chỉ trong vài bước.

Bạn đang xem : bảng viền tròn css

03 tháng 10, 2011

Trước đây đã có một số cuộc thảo luận về cách hoặc thời điểm sử dụng bảng trong phát triển web. Mặc dù vậy, kết luận vẫn giống nhau: khi bạn xử lý dữ liệu dạng bảng, thì bảng là hoàn toàn cần thiết.

Thiết kế một chiếc bàn là một thách thức – và ở đây tôi không chỉ nói về hình thức của nó. Chủ yếu là về cách dễ đọc bảng của bạn. Nếu bảng của bạn không dễ quét, người dùng thường khó chịu vì họ mất tập trung khi cố gắng tìm đúng hàng và cột.

Đã nói rằng, hôm nay chúng ta sẽ tạo các bảng đẹp và thiết thực được tạo kiểu bằng CSS. Ngoài ra, jQuery sẽ được sử dụng để tạo dự phòng cho các trình duyệt cũ hơn.

Xem bản trình diễn

Có gì thú vị về những chiếc bàn này?

Trong bài viết này, bạn sẽ thấy cách CSS3 và bảng có thể hoạt động cùng nhau để tạo ra một số kết quả thú vị và có thể sử dụng được.

  • Các góc được làm tròn không có hình ảnh
  • Rất dễ cập nhật – không có thêm id CSS hoặc lớp nào được thêm vào
  • Thân thiện với người dùng và dễ đọc

Các góc bàn tròn

Đây là mẹo: trong khi giá trị mặc định của border-sập riêng , chúng tôi cũng cần đặt border-spacing thành 0 .

  

bảng

{

*

border-sập

:

thu gọn

;

/ * IE7 trở xuống * /

border-spacing

:

0

;

}

Đối với IE7 trở xuống, chúng tôi cần thêm một dòng cụ thể để tạo dự phòng tốt cho các bảng.

Sau đó, chúng ta chỉ cần làm tròn một số góc:

  

th

: first-child

{

border-radius

:

6px

0

0

0

;

}

th

: last-child

{

border-radius

:

0

6px

0

0

;

}

th

: only-child

{

border-radius

:

6px

6px

0

0

;

}

jQuery hover dự phòng

Bạn có thể đã biết rằng khi nói đến IE6 , : hover không thực sự hoạt động trên các phần tử không phải anchor.

Vì vậy, để làm cho nó hoạt động, thay vì giải pháp CSS mà chúng tôi đã sử dụng:

  

. giáp

tr

: di chuột

{

background

:

# fbf8e9

; < / p>

chuyển tiếp

:

tất cả

0,1 giây < / p>

easy-in-out

;

}

… bạn có thể sử dụng một số mã jQuery để mô phỏng hiệu ứng di chuột:

  

$

(

'

. giáp tr

'

).

di chuột qua

(

function

() {

$

(

this

). < / p>

addClass

(

'

đánh dấu

'

);

}).

mouseout

(

function

() {

$

(

this

). < / p>

removeClass

(

'

đánh dấu

'

);

});

… và đây cũng là các kiểu cho lớp CSS highlight :

  

. highlight

{

background

:

# fbf8e9

; < / p>

chuyển tiếp

:

tất cả

0,1 giây < / p>

easy-in-out

;

}

Ở trên về cơ bản là bản sao . bordered tr: hover .

jQuery zebra dự phòng

Để tạo hiệu ứng ngựa vằn, bằng cách sử dụng CSS3, chúng tôi đã chọn các hàng chẵn trong tbody :

  

. zebra

tbody

tr < / p>

: nth-child

(

chẵn

)

{

background

:

# f5f5f5

; < / p>

box-shadow

:

0

1px

0

rgba

(

255

,

255

,

255

,

. 8

)

nội dung

;

}

Bây giờ, bộ chọn ở trên là một CSS3 - vì vậy không hỗ trợ cho các trình duyệt cũ hơn. Dưới đây, bạn sẽ thấy cách chúng tôi có thể nhắm mục tiêu và tạo kiểu các hàng đồng đều cho tất cả các trình duyệt :

  

$

(

"

. zebra tbody tr: Even

"

).

addClass

(

'

thay thế

< p class = "dl"> '

);

  

. alternate

{

background

:

# f5f5f5

; < / p>

box-shadow

:

0

1px

0

rgba

(

255

,

255

,

255

,

. 8

)

nội dung

;

}

Hỗ trợ trình duyệt

Các bảng đã xuống cấp rất đẹp trên các trình duyệt cũ hơn, vì vậy bạn có muốn sử dụng cả các giải pháp jQuery ở trên hay không. Đó là tất cả về đối tượng khách truy cập mà bạn đang nhắm mục tiêu.

Rất nhiều!

Cảm ơn bạn đã đọc bài viết này!


Xem thêm những thông tin liên quan đến chủ đề bảng viền tròn css

Tạo bảng(Table) trong Html, Css siêu chi tiết | Unitop.vn

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-11-15
  • Đánh giá: 4 ⭐ ( 7444 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này giúp bạn nắm bắt được cách sử dụng bảng(table) trong html. Ngoài ra tôi hướng dẫn bạn cách định dạng css cho những phần ở trong bảng để hiển thị theo ý mình.
    Tóm tắt:
    TẠO BẢNG TABLE TRONG HTML
    - Bảng dùng để hiển thị dữ liệu bảng
    - Bảng có hàng, cột, ô

    Tạo bảng html
    - table: Bao quanh bảng
    - tr: Hàng của bảng
    - td: Cột của bảng
    - thead: Tiêu đề bảng
    - tbody: Thân bảng
    - tfoot: Chân bảng
    - ...

    Css cho border
    - Căn lề
    - Padding
    - Border
    - Hover
    ------
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ------------
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    --------------------------
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

Tự học về thuộc tính bo tròn đường viền trong CSS

  • Tác giả: lethach.com
  • Đánh giá: 4 ⭐ ( 4410 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nơi chia sẻ những kiến thức bổ ích về lập trình Website, cách để tối ưu hóa công cụ tìm kiếm trong SEO, giới thiệu về các plugin và các kỹ xảo hay dùng trong WordPress.

[Tự học CSS] – Tự học về thuộc tính bo tròn đường viền trong CSS

  • Tác giả: giuseart.com
  • Đánh giá: 5 ⭐ ( 7757 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhưng chưa dừng lại ở đó, CSS còn có thuộc tính bo tròn lại nội dung của đường viền để làm cho bắt mắt người dùng hơn. Vậy muốn bo tròn đường viền thì làm..

2.4. Đường viền và hiệu ứng đổ bóng

  • Tác giả: www.laptrinhtanbinh.com
  • Đánh giá: 3 ⭐ ( 2912 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách sử dụng đường viền (border) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 2090 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Đường viền trong CSS | Border trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 8958 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đường viền trong CSS | Border trong CSS - Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Đường viền trong CSS (CSS border)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 3104 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các kiểu đường viền trong CSS, Thay đổi độ rộng của đường viền, Thay đổi màu viền, Thay đổi các mặt riêng lẻ của đường viền, Sử dụng gộp nhiều thuộc tính đường viền, Đường viền vát tròn đỉnh trong CSS

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tách chuỗi trong javascript: ngắt chuỗi thành chuỗi con - ngắt chuỗi trong javascript

By ads_php