Cách xóa khoảng trắng giữa tr và td trong HTML

Tôi muốn xóa khoảng trắng giữa chúng để topLine và leftLine được kết nối với nền đen mà không có bất kỳ khoảng trắng nào

Đoạn mã dưới đây cho thấy kết quả mục tiêu của tôi. Nhưng tôi thích đặt cellspacing=“0” giữa

nếu có thể, tôi muốn xóa tất cả khoảng cách giữa các bảng trong tất cả các bảng trong trang của mình
mã * { lề. 0; đệm. 0} dường như không đủ cho nó

  
    topLine
  
  
    leftLine
    myText
  

Việc sử dụng các bảng để hiển thị dữ liệu vẫn là một trong những kỹ thuật nền tảng nổi tiếng nhất của HTML. Nó vẫn được sử dụng rộng rãi kết hợp với tất cả các loại công nghệ và khuôn khổ để cung cấp bố cục hữu ích trên trang web

Đôi khi chúng tôi thấy rằng có những khoảng cách không mong muốn giữa các hàng và ô của bảng. Điều này tỏ ra khó chịu vì các thuộc tính lề, phần đệm và đường viền thay đổi không hiệu quả để loại bỏ các khoảng trống này

Vì vậy, làm cách nào bạn có thể xóa khoảng cách giữa các hàng và ô HTML?

• Sử dụng các thuộc tính border-collapse  và border-spacing trong CSS
• Thêm thiết lập lại CSS vào mã của bạn
• Sử dụng thuộc tính bảng cellspacing (không dùng nữa)

Giả sử chúng ta có một bảng giống như sau

Chúng ta có thể loại bỏ các khoảng trống bằng các phương pháp sau

Sử dụng Thu gọn Đường viền & Khoảng cách Đường viền

Thuộc tính border-collapse xác định xem các ô bên trong một bảng chia sẻ hay các đường viền riêng biệt. Trong khi thuộc tính border-spacing đặt khoảng cách giữa các đường viền của các bảng liền kề

Trong CSS của chúng tôi, chúng tôi có thể đặt thuộc tính border-spacing thành 0

table {
  border-spacing:0; /* Removes the cell spacing via CSS */ 
  border-collapse: collapse;
}

Đánh dấu của chúng tôi sẽ trông như thế này

<table class="no-spacing"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>Tommy Vercetti</td>
    <td>Niko Bellic</td>
  </tr>
</table>

Khoảng trống trên bàn của chúng tôi đã biến mất

Thêm Đặt lại CSS

Để tạo sự căn chỉnh nhất quán cho đường viền, lề và phần đệm của bạn, chúng tôi có thể sử dụng thiết lập lại CSS. Điều này sẽ giải quyết các khoảng trống trong các hàng và ô trong bảng HTML của chúng tôi, tuy nhiên, đây là một cách tiếp cận quá mức nếu các kiểu CSS của bạn đã được thiết lập

Vì vậy, nếu các kiểu CSS cho dự án của bạn đang ở giai đoạn sơ khai thì phương pháp này sẽ hiệu quả. Nó sẽ giúp bạn giải quyết các khoảng trống của bảng cũng như cho phép bạn tùy chỉnh các quy tắc về khoảng cách của mình từ đầu

Chỉ cần thêm CSS từ liên kết này vào các kiểu cơ sở trong dự án của bạn

Sử dụng khoảng cách ô (không dùng nữa)

Đây là một phương pháp cũ để kiểm soát bố cục ô của bảng. Điều này có thể hoạt động trong các trình duyệt cũ hơn nhưng hầu như không được dùng nữa. Thêm cái này vào nếu bạn muốn hỗ trợ IE6 trở xuố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

  

    
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 các 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