Tìm hiểu cách sử dụng margin, border và z-index trên các phần tử bảng HTML tbody, thead và tr.

Bạn đang xem : html lề ô trong bảng

Bạn có muốn

Bạn chặn quảng cáo 😢Bạn có muốn < span> mua cho tôi ☕️ thay?

Cách đây rất lâu, thực tế không có cách nào xoay quanh phần tử HTML & lt; table & gt; để tạo bố cục phức tạp trên web. May mắn thay, những ngày đó đã qua lâu. Ngày nay, chúng tôi chỉ sử dụng phần tử & lt; table & gt; vì nó nên được sử dụng: để hiển thị dữ liệu dạng bảng. Tuy nhiên, chỉ gần đây, tôi mới được nhắc lại rằng việc tạo kiểu bảng không dễ như người ta nghĩ.

Thật không may, một số thuộc tính CSS (ví dụ: margin , border-radius z-index ) không hoạt động trên các phần tử bảng HTML nhất định như & lt; tbody & gt; , & lt; thead & gt; , và & lt; tr & gt; . Trong bài viết này, chúng ta sẽ khám phá cách khắc phục những hạn chế này.

Kết quả cuối cùng.

Kết quả cuối cùng

Mục lục

Đánh dấu bảng

Ảnh chụp màn hình ở trên minh họa kết quả cuối cùng mà chúng tôi muốn đạt được: một bảng với hàng đầu tiên là tiêu đề chính và nhiều phần, tất cả đều có tiêu đề phụ.

  

& lt; < / p>

bảng

lớp

=

"bảng"

& gt;

& lt;

cái

& gt;

& lt;

tr

& gt;

& lt;

th

& gt;

MO

& lt;

/

th

& gt;

& lt;

th

& gt;

TU

& lt;

/

th

& gt;

& lt;

th

& gt;

CHÚNG TÔI

& lt;

/

th

& gt;

& lt;

th

& gt;

TH

& lt;

/

th

& gt;

& lt;

th

& gt;

FR

& lt;

/

th

& gt;

& lt;

th

& gt;

SA

& lt;

/

th

& gt;

& lt;

th

& gt;

SU

& lt;

/

th

& gt;

& lt;

/

tr

& gt;

& lt;

/

cái

& gt;

& lt;

tbody

class

=

"bước từng phần"

& gt;

& lt;

tr

class

=

"tiêu đề phụ"

& gt;

& lt;

th

colspan

=

"7"

& gt;

Giờ làm việc

& lt;

/

th

& gt;

& lt;

/

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

4

& lt;

/

td

& gt;

& lt;

td

& gt;

5

& lt;

/

td

& gt;

& lt;

td

& gt;

5

& lt;

/

td

& gt;

& lt;

td

& gt;

5

& lt;

/

td

& gt;

& lt;

td

& gt;

5

& lt;

/

td

& gt;

& lt;

td

& gt;

0

& lt;

/

td

& gt;

& lt;

td

& gt;

0

& lt;

/

td

& gt;

& lt;

/

tr

& gt;

& lt;

/

tbody

& gt;

& lt;

tbody

class

=

"bước từng phần"

& gt;

& lt;

tr

class

=

"tiêu đề phụ"

& gt;

& lt;

th

colspan

=

"7"

& gt;

Tập thể dục

& lt;

/

th

& gt;

& lt;

/

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

0,5

& lt;

/

td

& gt;

& lt;

td

& gt;

0,5

& lt;

/

td

& gt;

& lt;

td

& gt;

0,5

& lt;

/

td

& gt;

& lt;

td

& gt;

1

& lt;

/

td

& gt;

& lt;

td

& gt;

0,5

& lt;

/

td

& gt;

& lt;

td

& gt;

2

& lt;

/

td

& gt;

& lt;

td

& gt;

0

& lt;

/

td

& gt;

& lt;

/

tr

& gt;

& lt;

/

tbody

& gt;

& lt;

tbody

class

=

"phần"

& gt;

& lt;

tr

class

=

"phần-tiêu đề"

& gt;

& lt;

th

colspan

=

"7"

& gt;

Tổng cộng

& lt;

/

th

& gt;

& lt;

/

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

8.5

& lt;

/

td

& gt;

& lt;

td

& gt;

8.5

& lt;

/

td

& gt;

& lt;

td

& gt;

9.5

& lt;

/

td

& gt;

& lt;

td

& gt;

10

& lt;

/

td

& gt;

& lt;

td

& gt;

5.5

& lt;

/

td

& gt;

& lt;

td

& gt;

2

& lt;

/

td

& gt;

& lt;

td

& gt;

0

& lt;

/

td

& gt;

& lt;

/

tr

& gt;

& lt;

/

tbody

& gt;

& lt;

/

bảng

& gt;

Ở trên, bạn thấy cấu trúc HTML của bảng. Bên trong phần tử & lt; thead & gt; , chúng ta có tiêu đề chính và bên dưới nó là một số phần tử & lt; tbody & gt; đại diện cho các phần riêng biệt của bảng, mỗi phần tử có phần phụ riêng header.

Sử dụng margin trên các phần tử của bảng

Như bạn có thể thấy trong ảnh chụp màn hình tại đầu bài viết này, có một số khoảng trắng giữa tiêu đề chính và phần & lt; tbody & gt; đầu tiên và cả giữa các phần & lt; tbody & gt; riêng lẻ. Ngây thơ như tôi, lần đầu tiên tôi cố gắng áp dụng margin-top cho các phần tử & lt; tbody & gt; .

Nhưng thật không may, nếu bạn cố gắng áp dụng margin trên & lt; tbody & gt; , & lt; thead & gt; hoặc & lt; tr & gt; , bạn sẽ thấy rằng nó không có hiệu lực. Điều đầu tiên trước tiên: không có cách kỳ diệu nào khiến margin hoạt động trên các phần tử này ngoài việc thay đổi thuộc tính display (mà bạn thường không muốn thay đổi vì mất tất cả các định dạng liên quan đến bảng). Nhưng có một số cách thay thế để chúng ta có thể thêm một số khoảng trắng xung quanh các phần tử đó.

Sử dụng border

giải pháp đơn giản nhất để đạt được kết quả tương tự khi sử dụng margin là thêm border-top: 1em vào các phần tử & lt; tbody & gt; .

  

//

1

.

Cần thiết

cho

làm

border-top

spacing

làm việc

.

.

bảng

{

border-sập

:

thu gọn

;

//

1

border-spacing

:

0

;

}

.

phần

{

border-top

:

1

em

< p class = "kc"> solid

trong suốt

;

}

Tất cả các phần tử & lt; tbody & gt; của chúng tôi, cần một khoảng trống xung quanh chúng, đều có một lớp .section < / mã>. Để border-top hoạt động, chúng ta phải đặt border -ump: sập trên bảng của mình.

< / p>

Sử dụng :: before :: after phần tử giả

< p> Một cách khác để áp dụng một số lề trên phần tử & lt; tbody & gt; là sử dụng phần tử giả :: before hoặc :: after .

  

.

phần

::

trước

{

height

:

1

em

;

display

:

bảng

-

hàng

;

nội dung

:

''

;

}

Theo cách này, về cơ bản, chúng ta thêm một hàng (trống) mới mà chúng ta có thể sử dụng để thêm một số khoảng trắng vào đầu các phần tử & lt; tbody & gt; của chúng ta.

Tùy thuộc vào trường hợp mà bạn có thể muốn sử dụng phương thức border hoặc thủ thuật phần tử giả.

Sử dụng border-radius trên các phần tử của bảng

Tiếp theo, chúng tôi muốn cung cấp & lt; tbody & gt; thành phần một đường viền và áp dụng bán kính đường viền. Một lần nữa, chúng tôi không may mắn nếu chúng tôi cố gắng áp dụng border border-radius vào chính phần tử & lt; tbody & gt; .

  

// 1. Sử dụng box-shadow vì nếu không

// border-radius không hoạt động trên & lt; tbody & gt ;.

. section-step

{

border-radius

:

0

. 25em

;

//

1

box-shadow

:

0

0

0

1px

# ccc

;

//

1

}

Ở trên, bạn có thể thấy cách chúng tôi có thể sử dụng box-shadow thay vì border để đạt được (gần như) cùng một kết quả.

Thay vào đó, tạo kiểu các ô trong bảng

Như bạn có thể nhận thấy, cách triển khai hiện tại của chúng tôi trông không giống hệt như ảnh chụp màn hình bạn đã thấy ở đầu bài viết này.

Hack khoảng cách hoạt động giống như padding thay vì margin.

Việc hack khoảng cách hoạt động giống như padding thay vì margin

Bây giờ chúng tôi đã thêm các đường viền, chúng tôi có thể thấy rằng khoảng cách của chúng tôi hack không hoạt động như margin mà giống như padding . Rất tiếc, trong những trường hợp này, nếu bạn có đường viền xung quanh & lt; tbody & gt; < / code> phần tử phải có một số khoảng trắng với phần tử trước đó, không có giải pháp dễ dàng nào để đạt được điều này. Cách duy nhất để giải quyết vấn đề này là áp dụng các kiểu đường viền của chúng tôi cho các ô trong bảng và sử dụng một số phép thuật công cụ chọn : first-child / : last-child để đạt được bố cục mong muốn.

  

. section-step

th

,

. section-step

td

{

border

:

0

solid

# ccc

;

}

. section-step

th

: first-child

, < / p>

. section-step

td

: first-child

{< / p>

border-left-width

:

1px

;

}

. section-step

th

: last-child

, < / p>

. section-step

td

: last-child

{< / p>

border-right-width

:

1px

;

}

. section-step

tr

: first-child

th

,

. section-step

tr

: first-child

td

{

border-top-width

:

1px

;

}

. section-step

tr

: first-child

th

: con đầu

,

. section-step

tr

: first-child

td

: con đầu

{

border-top-left-radius

:

0

. 25em

;

}

. section-step

tr

: first-child

th

: last-child

,

. section-step

tr

: first-child

td

: last-child

{

border-top-right-radius

:

0

. 25em

;

}

. section-step

tr

: last-child

th

,

. section-step

tr

: last-child

td

{

border-bottom-width

:

1px

;

}

. section-step

tr

: last-child

th

: con đầu

,

. section-step

tr

: last-child

td

: con đầu

{

border-bottom-left-radius

:

0

. 25em

;

}

. section-step

tr

: last-child

th

: last-child

,

. section-step

tr

: last-child

td

: last-child

{

border-bottom-right-radius

:

0

. 25em

;

}

Trong đoạn mã ở trên, chúng tôi áp dụng các kiểu đường viền cần thiết cho th td có liên quan các phần tử ô trong bảng. Các phần tử ở các góc phải có bán kính đường viền tất cả các phần tử ở các cạnh phải có đường viền. Bằng cách sử dụng các bộ chọn : first-child : last-child , chúng ta có thể áp dụng kiểu cho các ô chính xác.

Sử dụng z-index trên các phần tử của bảng

Như bạn có thể thấy trong phần đầu ảnh chụp màn hình của kết quả cuối cùng, một box-shadow đã được áp dụng cho tiêu đề phụ, phủ lên hàng sau. Nếu chúng tôi chỉ cố gắng áp dụng một box-shadow cho phần tử, chúng tôi sẽ thấy rằng bóng của tiêu đề phụ biến mất phía sau hàng sau.

 bóng hộp biến mất sau hàng sau.

Bóng hộp biến mất sau hàng sau

Thông thường, chúng tôi sẽ sử dụng z- index để nâng tiêu đề phụ phía trên hàng sau. Nhưng như bạn có thể đã đoán, sử dụng định vị tương đối và z-index trên phần tử & lt; tbody & gt; cũng không hoạt động. Nhưng chúng ta có thể sử dụng kiến ​​thức của mình về ngữ cảnh xếp chồng CSS để giải quyết vấn đề này. Việc áp dụng position: relative z-index cho một phần tử sẽ tạo ra một ngữ cảnh xếp chồng mới. Nhưng đây không phải là cách duy nhất để chúng ta có thể đạt được điều này: ví dụ: chúng ta cũng có thể sử dụng convert: translate (0, 0) .

Kết quả cuối cùng .

Kết quả cuối cùng

Kết thúc nó

Chúng ta phải tìm hiểu sâu về túi thủ thuật CSS để làm cho một số bố cục bảng phức tạp hơn hoạt động. Nhưng cái hay của CSS là luôn có cách để đạt được những điều nhất định.

Lẽ ra, chúng ta có thể làm cho cuộc sống của mình dễ dàng hơn một chút bằng cách ghi đè thuộc tính display của các phần tử trong bảng. Nhưng điều đó có nghĩa là bạn phải chỉ định rõ ràng chiều rộng của mỗi ô để làm cho các cột có chiều rộng bằng nhau. Điều này có thể ổn trong một số trường hợp nhất định, nhưng sẽ thuận tiện hơn khi dựa vào trình duyệt để tự động xác định chiều rộng của mỗi ô.

Tham khảo


Xem thêm những thông tin liên quan đến chủ đề html lề ô bảng

4 cách CĂN GIỮA khối trong html css có thể bạn chưa biết | Học html css cơ bản

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-12-22
  • Đánh giá: 4 ⭐ ( 3240 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này hướng dẫn bạn 4 cách để canh giữa khối trong css. Nó cực kỳ quan trọng trong việc xây dựng layout website của bạn.
    ------
    » » 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

Table trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 4 ⭐ ( 7729 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng (hàng * cột). Có thể có nhiều cột trong một hàng. Các thẻ table trong HTML được sử dụng để

Bảng trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 5 ⭐ ( 8548 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng cũng như trang trí bảng trong HTML.

Tạo bảng trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 8306 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng thành thạo bảng trong HTML là rất quan trọng, bảng giúp chúng ta bố trí dữ liệu có trật tự và các tuỳ chọn khác cho hiển thị bảng hiệu quả.

Sử dụng bảng và lớp trong HTML

  • Tác giả: www.voer.edu.vn
  • Đánh giá: 5 ⭐ ( 2167 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng bảng và lớp trong HTML (giáo trình - tài liệu - học liệu từ VOER)

Hướng dẫn cách căn chỉnh vị trí trong html mới nhất 2020

  • Tác giả: cachthietkeweb.vn
  • Đánh giá: 5 ⭐ ( 9409 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: căn chỉnh vị trí trong html là một trong những từ khóa được search nhiều nhất trên google về chủ đề căn chỉnh vị trí trong html. Trong bài viết này, cachthietkeweb.vn sẽ viết bài Hướng dẫn cách căn chỉnh vị trí trong html mới nhất 2020.

Bảng (table) trong HTML, cú pháp và ví dụ minh họa

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 5885 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: bang table trong html, Bảng (table) trong HTML, cú pháp và ví dụ minh họa

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 ảnh & hình nền trong HTML - làm thế nào để chèn một hình ảnh trong html

By ads_php