Đường viền cột css

Giá trị mặc định. trung bình không có màu Kế thừa. không có hoạt ảnh. vâng, xem các thuộc tính riêng lẻ. Đọc về hoạt ảnh Try itVersion. Cú pháp CSS3JavaScript. sự vật. Phong cách. columnRule="3px đầu màu xanh" Hãy dùng thử

Để thêm đường viền vào trong bảng, chúng tôi sử dụng thuộc tính CSS

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

4 trên các phần tử HTML

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

5,

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

0,

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

1

Ví dụ

table, th, td {
  border: 1px solid black;
}

View results

Border đơn

---

Nếu chúng ta không muốn có đường viền kép như trong ví dụ trên, hãy đặt lại thuộc tính CSS

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

2 thành

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

3. Đường viền kép sẽ thu gọn lại thành một đường viền đơn duy nhất

Ví dụ

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

View results

Bảng viền kiểu

---

Chúng ta đặt màu nền của mỗi ô và đặt màu trắng cho đường viền (giống như màu nền của văn bản), chúng ta sẽ có ấn tượng về một đường viền vô hình

Ví dụ

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

View results

Đường viền

---

Chúng ta sử dụng thuộc tính

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

4 để tạo ra các đường viền với góc được bo tròn

Ví dụ

________số 8

View results

Loại bỏ đường viền xung quanh bảng bằng cách bỏ qua bộ chọn css

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

5

Ví dụ

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

View results

Đường viền bảng chấm chấm

---

Thuộc tính sử dụng của

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

6, chúng ta có thể định dạng kiểu hiển thị của đường viền

Các giá trị áp dụng cho thuộc tính CSS

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

6 như sau

• say mê
• tiêu tan
• chất rắn
• gấp đôi
• rãnh
• cây rơm
• chèn vào
• khởi đầu
• không ai
• ẩn giấu

Màu viền

---

Với thuộc tính

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

8, chúng ta chỉ có thể xác định màu sắc cho đường viền

Ví dụ

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

3

View results

Chiều rộng bảng HTML

---

Để đặt chiều rộng của bảng, chúng ta sử dụng thuộc tính

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

9 vào phần tử html

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

0

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

1

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

7 thế là chúng ta đã sử dụng grid rồi giống như

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

8 vậy. Đơn giản quá nhỉ keke. Giờ chúng ta đi sâu vào từng thuộc tính khác nhau của CSS Grid nhá

# đường lưới

Grid track hiểu nôm na là các đường được đánh dấu theo thứ tự theo các cột và các hàng để thiết lập vị trí cho các phần tử một cách dễ dàng hơn. Mình ủng hộ các bạn mở Firefox lên để Inspect Code(F12) của Codepen demo ở trên để thấy grid track một cách rõ ràng nhất nha

Các đường đánh dấu theo hàng và cột tương ứng từ trên cùng hoặc bên ngoài cùng bên trái. Cách đơn giản để ghi nhớ là cứ lấy cột số + 1 sẽ hiển thị tổng theo dõi theo cột và số hàng + 1 sẽ hiển thị tổng theo dõi theo hàng. Các bạn thấy có 2 cột thì có 3 track line cột đánh dấu 1 2 3 còn 5 hàng thì 6 track line hàng. -1 is the end

Ở đây các bạn chỉ cần hiểu nó là các đường như hình trên là được. Ở bài sau mình sẽ nói chi tiết về công dụng rất quan trọng của nó trong việc tạo layout như thế nào. Do CSS Grid khá nhiều thuộc tính nên mình không gom vào bài được

# lưới-mẫu-cột

Các cột đúng như tên gọi là cột, khi sử dụng thuộc tính này grid container sẽ chia cột cho các phần tử bên trong nó. Ở đây các bạn có thể chia bao nhiêu cột tùy chọn cho mình, thông thường dựa trên thiết kế thiết kế là 12 cột bằng nhau, có khi 8…

Ví dụ ở đây mình có 10 phần tử, mình muốn chia mỗi cột có 2 phần tử thì mình sẽ chia cho 5 cột. Đơn vị ở đây các bạn có thể sử dụng

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

9 hay bất cứ điều gì tùy ý các bạn. Tuy nhiên, ở đây có một giá trị mới chỉ được sử dụng trong lưới css đó là fr(đơn vị phân số). Giá trị này mình sẽ giải thích ở một phần sau nha

table, th, td {
  border: 1px solid black;
}

2

table, th, td {
  border: 1px solid black;
}

3

table, th, td {
  border: 1px solid black;
}

4

Bạn muốn chia bao nhiêu cột thì cứ điền vô như thế này .

# đơn vị phân số

This is a new value and used in CSS Grid nha các bạn. Giá trị này sẽ chiếm khoảng trống lớn nhất có thể để mình giải thích cho các bạn dễ hiểu nè. Giả sử vùng chứa có độ rộng là 100% và lúc này

table, th, td {
  border: 1px solid black;
}

12 thì sẽ tạo ra một cột là 100%. Các phần tử sẽ phải cùng một cột như dưới đây

Xem Pen CSS grid-fr của EvonDev (@blackzero) trên CodePen

Tuy nhiên nếu mình thêm vài

table, th, td {
  border: 1px solid black;
}

13 vào nữa thì lúc này đây sẽ là

table, th, td {
  border: 1px solid black;
}

14 không hạn thì bố cục nó sẽ tạo ra 3 cột với cột giữa là 2fr sẽ gấp đôi 2 cột còn lại. Nghĩa là container 100% sẽ chia cho 4 và cột đầu tiên và cột cuối cùng sẽ chiếm 25% còn 50% còn lại là cột ở giữa

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

0

Các bạn có thấy nó quen thuộc không, khá giống cái thuộc tính

table, th, td {
  border: 1px solid black;
}

15 trong css flexbox mình nói ở phần 3 của series css flexbox toàn tập. Cái khác là đây nó áp dụng cho grid và để chia cột nhá đừng hiểu nhầm nha.

# lưới-mẫu-hàng

Cũng tương tự như

table, th, td {
  border: 1px solid black;
}

16 nhưng thuộc tính này là chia hàng(hàng). Các bạn có thể chia vùng chứa thành nhiều hàng tùy chọn vào thiết kế hoặc có thể không cần đặt, để tự động (auto) cũng được

Xem các hàng mẫu lưới CSS Pen của EvonDev (@blackzero) trên CodePen

Các bạn thấy nó cũng đơn giản chứ nhỉ. Các bạn có thể tạo ra bao nhiêu hàng tùy chọn và có thể sử dụng các đơn vị như thuộc tính

table, th, td {
  border: 1px solid black;
}

16 mà mình đã nói ở trên. Ở đây mình có 10 phần tử thì mình muốn chia thành 3 cột và 3 hàng thì nó sẽ như thế này

Tuy nhiên, còn lại một phần tử cuối cùng nó không còn chỗ vì chia 3 cột 3 hàng thì được 9 phần tử thôi nên nó sẽ tự động tụt xuống tạo nên đường Implicit Tracks. Trong grid có 2 khái niệm về track đó là Implicit và Explicit, vậy nó là gì ?

# lưới ẩn và rãnh rõ ràng

Hai đường này hơi lằng nhằng nhưng cũng dễ hiểu thôi thường khi làm mình không để ý lắm nhưng viết bài thì mình phải nói rõ cho các bạn biết thêm. Như phần trên mình nói có 10 phần tử, mà mình chỉ tạo 3 cột 3 hàng thì phần tử cuối cùng sẽ rớt xuống tạo thành 1 hàng mới

Các bạn mở giúp mình cái Codepen ở phần

table, th, td {
  border: 1px solid black;
}

18 lên bằng Firefox rồi F12 mở lưới bố cục lên được như hình trên. Các bạn zoom trình duyệt lên để biết rõ là có 1 đường đen ở trên cùng và những đường có dấu gạch ngang – cho đến một đường đen ở hàng số 4 đây chính là Explicit Tracks

Còn một đường dấu … ở hàng số 5 đó là do container không đủ chỗ chứa cho phần số 10 nên nó bị rớt xuống tạo nên 1 hàng mới và tạo nên đường dấu… chứ không phải đen hay gạch ngang – như ở Explicit Tracks đây

Hai đường này giúp chúng ta nhận biết được vị trí của các phần tử để hiển thị cho đúng nha anh em. To việc chia cột hay hàng trong bố cục được hiển thị chính xác này

# grid-auto-flow

Như ở trường hợp khi có một hoặc nhiều phần tử dư do không đủ cột hoặc hàng thì nó sẽ rớt xuống tạo nên hàng mới. Thì mình muốn set cho các phần tử bị rớt ra tạo nên Implicit Tracks có chiều cao nhất định nào đó. Chúng ta sẽ sử dụng thuộc tính

table, th, td {
  border: 1px solid black;
}

19 kết hợp với thuộc tính

table, th, td {
  border: 1px solid black;
}

20 để thiết lập cho các phần tử đó

Xem Pen CSS grid-auto-row của EvonDev (@blackzero) trên CodePen

Ở đây mình muốn chọn phần tử số 10 khi tụt xuống tạo nên hàng mới có chiều cao là 100px thì mình đặt

table, th, td {
  border: 1px solid black;
}

21. Các bạn xem demo Codepen là sẽ hiểu ngay thôi

Còn nếu bạn muốn các cột đều nằm trên một hàng và tạo thành nhiều cột khác nhau cho dù ban đầu bạn chỉ đặt có 2 cột mà thôi thì cũng tương tự chúng ta sử dụng thuộc tính

table, th, td {
  border: 1px solid black;
}

22 nhưng giá trị là cột

Mình muốn các cột được tạo thêm bằng nhau và có giá trị là 250px thì mình sẽ code như thế này

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}

9
Nếu bạn bỏ thuộc tính grid-template-columns ra thì nó cũng sẽ tự động tạo ra các cột tương ứng với số phần tử và độ rộng của các cột là 250px.

Xem Pen CSS grid-auto-columns của EvonDev (@blackzero) trên CodePen

# khoảng cách lưới

Thuộc tính này giúp chúng ta tạo khoảng cách giữa các phần tử với nhau theo cột và hàng. Thuộc tính này bao gồm các thuộc tính

table, th, td {
  border: 1px solid black;
}

23 và

table, th, td {
  border: 1px solid black;
}

24 được viết như sau

table, th, td {
  border: 1px solid black;
}

25

Các bạn có thể xem hình minh họa dưới đây mình cho

table, th, td {
  border: 1px solid black;
}

26. Nó sẽ tạo khoảng cách giữa các phần tử 20px theo cột và hàng luôn rất đều và đẹp

# Tạm dừng

phù. Bài viết tạm đến đây thôi. CSS Grid hại không được nên mình viết thành nhiều phần, đây mới là bước đầu thôi các bạn ah. Đó mình học mãi mới hiểu được nó giờ thì hiểu tàm tạm rồi nên viết để chia sẽ cho các bạn

Mình biết là nó hơi khó hiểu, các bạn chịu khó đọc và làm theo nha. Nếu không hiểu thì cứ comment hoặc inbox hỏi mình nhé. Nếu có góp ý hay gì thì comment cho mình phát để có động lực viết bài nha. Xin cám ơn và chúc các bạn một ngày tốt lành