Cách tạo khoảng cách giữa hai cột trong bảng bằng CSS

Theo như tôi biết, lề phải là vô dụng đối với bảng, bạn có thể sử dụng phần đệm bên trái. 150px. Thuộc tính này sẽ thêm không gian vào các cột cụ thể. Đây là mã mẫu

    


    
        
            Label
            
            Label
            
        
    
    style="border-collapse:separate; border-spacing:150px 0;"

Trân trọng,

Eric Du

Trong bài viết này, chúng ta sẽ hiểu cách thêm khoảng cách giữa hai hàng trong bảng bằng CSS với các ví dụ khác nhau. Chúng ta có thể thêm khoảng cách giữa hai hàng trong một bảng bằng cách sử dụng thuộc tính CSS như border-spacing và border-collapse. Chúng ta có thể thêm cả khoảng cách ngang và dọc giữa các hàng

Sau đây là các ví dụ về cách thêm Khoảng trắng giữa hai hàng trong bảng bằng CSS

ví dụ 1

Giải trình

Trong ví dụ trên, chúng tôi đã tạo một ví dụ về cách thêm khoảng cách giữa hai hàng của bảng bằng cách sử dụng CSS. Trong, chúng tôi đã thêm khoảng trắng giữa tiêu đề bảng và thân bảng

Nhiệm vụ hôm nay là tạo khoảng cách giữa hai hàng trong một bảng. Khoảng cách giữa hai hàng trong một có thể được thêm vào bằng cách sử dụng thuộc tính CSS border-spacing và border-collapse. Thuộc tính border-spacing được sử dụng để đặt khoảng cách giữa các ô của bảng và thuộc tính border-collapse chỉ định đường viền của bảng có bị thu gọn hay không. Thuộc tính khoảng cách đường viền chỉ có thể được sử dụng khi thuộc tính thu gọn đường viền được đặt thành "riêng biệt"

Hãy xem một ví dụ và chỉ ra cách thực hiện từng bước

• đặt

  đánh dấu trong phần

• đặt

  Và

  thẻ và viết một số nội dung trong đó

• đặt

gắn thẻ và tạo bảng của bạn

Sử dụng

gắn thẻ cho mỗi hàng

Đối với hàng đầu tiên, sử dụng

thẻ xác định ô tiêu đề trong bảng HTML

Đối với các hàng khác, sử dụng

thẻ xác định một ô dữ liệu tiêu chuẩn trong bảng HTML. Đối với các ô thuộc hàng đầu tiên, đặt lớp "td"

  

    
W3docs
    
Row spacing in a table
    
      
        Employee ID
        Name
        Gender
        Age
      
      
        10001
        Tom
        M
        30
      
      
        10002
        Sally
        F
        28
      
      
        10003
        Emma
        F
        24
      
    
  

• Sử dụng thuộc tính thu gọn đường viền với giá trị "riêng biệt" cho bảng
• Sử dụng thuộc tính border-spacing để đặt khoảng cách giữa các đường viền của các ô trong bảng lân cận
• Đối với hàng đầu tiên, hãy đặt màu nền và màu của văn bản bằng cách sử dụng thuộc tính màu nền và màu
• Đặt chiều rộng và phần đệm của các hàng
• Sử dụng thuộc tính text-align với giá trị "center" để căn văn bản vào giữa
• Bạn có thể tạo đường viền xung quanh các ô của bảng bằng cách sử dụng thuộc tính đường viền và sử dụng thuộc tính độ rộng đường viền, kiểu đường viền và màu đường viền
• Bạn có thể thiết lập màu sắc của

  thành phần của tài liệu bằng cách sử dụng thuộc tính color. Ngoài ra, bạn có thể chọn bất kỳ màu nào từ bộ chọn màu của chúng tôi

table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

th {
  background-color: #4287f5;
  color: white;
}

th,
td {
  width: 150px;
  text-align: center;
  border: 1px solid black;
  padding: 5px;
}

h2 {
  color: #4287f5;
}

Đây là kết quả của mã của chúng tôi

  
    Title of the document
    
  
  
    

      
W3docs
      
Row spacing in a table
      
        
          Employee ID
          Name
          Gender
          Age
        
        
          10001
          Tom
          M
          30
        
        
          10002
          Sally
          F
          28
        
        
          10003
          Emma
          F
          24
        
      
    

Giãn cách hàng trong bảngID nhân viênNameGiới tínhTuổi10001TomM3010002SallyF2810003EmmaF24

  
    Title of the document
    
  
  
    

      
W3docs
      
Row spacing in a table
      
        
          Employee ID
          Name
          Gender
          Age
        
        
          10001
          Tom
          M
          30
        
        
          10002
          Sally
          F
          28
        
        
          10003
          Emma
          F
          24
        
      
    

  

Trong ví dụ đầu tiên của chúng tôi, đối với thuộc tính khoảng cách đường viền, chúng tôi sử dụng giá trị "0 15px" có nghĩa là khoảng cách nằm giữa các hàng ngang. Trong ví dụ thứ hai, chúng tôi sử dụng giá trị "20px 0 " có nghĩa là khoảng cách nằm giữa các hàng dọc

Hãy cung cấp một số nền tảng cho bảng của chúng ta để xem chúng ta đang nói về điều gì, vì vậy

Và đây là kết quả

Điều gì xảy ra nếu chúng ta muốn xóa các đường viền bên trong giữa các cột trong ví dụ này?

Ok, chúng ta hãy cùng nhau sửa lỗi này

Xóa thu gọn đường viền. riêng biệt và khoảng cách biên giới. 20px 0 từ bảng CSS

Bây giờ, chúng tôi sẽ thêm khoảng cách đường viền. 20px 0 trên mỗi td của bảng của chúng tôi, thay vì toàn bộ bảng

Chúng ta cũng nên thêm một thuộc tính hiển thị của khối để nó hoạt động theo cách chúng ta muốn

Vì vậy, những thay đổi của chúng tôi sẽ như thế này

table {
  background: khaki;
}
table tbody {
  display: block;
  border-spacing: 20px 0;
}

Kết quả sẽ giống như trước đây. Bây giờ, đã đến lúc chúng ta xóa không gian viền ngoài bên trái và bên phải. Nó có thể được thực hiện nhanh chóng bằng cách chỉ cần thêm lề âm vào bên trái và bên phải của mỗi phần tử td để nó sẽ xóa khoảng trống đó cho chúng tôi

Và ở đây chúng tôi đi. Đây chính xác là những gì chúng tôi muốn. Như bạn thấy, không gian bên trái và bên phải đã biến mất vĩnh viễn