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 : các góc bảng được làm 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ủ đề góc bàn tròn css

CSS : Rounded table corners CSS only

  • Tác giả: Knowledge Base
  • Ngày đăng: 2022-01-24
  • Đánh giá: 4 ⭐ ( 2286 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS : Rounded table corners CSS only \r
    [ Beautify Your Computer : https://www.hows.tech/p/recommended.html ] \r
    \r
    CSS : Rounded table corners CSS only \r
    \r
    Note: The information provided in this video is as it is with no modifications.\r
    Thanks to many people who made this project happen. Disclaimer: All information is provided as it is with no warranty of any kind. Content is licensed under CC BY SA 2.5 and CC BY SA 3.0. Question / answer owners are mentioned in the video. Trademarks are property of respective owners and stackexchange. Information credits to stackoverflow, stackexchange network and user contributions. If there any issues, contact us on - htfyc dot hows dot tech\r
    \r
    CSS:RoundedtablecornersCSSonly CSS : Rounded table corners CSS only\r
    \r
    Guide : [ CSS : Rounded table corners CSS only ]

CSS Góc Bo Tròn

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 6172 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc Tính Bán Kính Đường Viền CSS
    ----------------------------------
    Thuộc tính CSS `border-radius` định nghĩa bán kính của các góc của phần tử.

    **Mẹo**: Thuộc tính này cho phép bạn thêm đường viền tròn...

[Tự học CSS] Tìm hiểu về màu, bo tròn góc(Rounded), viết gọn code của viền(Border) trong CSS

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 8605 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về màu, bo tròn góc(Rounded) của viền(Border) trong CSSCafedev chia sẻ cho ace về màu, bo tròn góc(Rounded), cách viết code ngắn gọn của viền(Border) trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

Bo tròn góc trong CSS

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

CSS3: Bo góc với border-radius

  • Tác giả: v1study.com
  • Đánh giá: 3 ⭐ ( 7690 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS3 cho phép bạn có thể bo tròn các góc mà không cần phải lập trình hay sử dụng kỹ thuật Photoshop bằng cách sử dụng thuộc tính border-radius.

Bo góc, bo tròn trong CSS

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

Bo tròn góc trong CSS

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 8021 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bo tròn góc (Rounded Corner) trong CSS được sử dụng để thêm góc màu tới phần thân tài liệu hoặc phần văn bản bởi sử dụng thuộc tính border-radius. Cú pháp đơn giản của Rounded Corner như sau

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  Cách thêm hình mờ trong HTML CSS (Ví dụ đơn giản) - watermark trong html w3schools

By ads_php