Chèn một hàng trong bảng

Question 1

<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Đây là phần đệm trông như thế nào. Xem cách td bên trong không bị ảnh hưởng. Giải pháp là gì? Vấn đề về đệm hàng trong bảng

Question 2

Bí quyết là đưa ra phần đệm trên các tdphần tử, nhưng hãy tạo một ngoại lệ cho phần đầu tiên (vâng, đó là hack, nhưng đôi khi bạn phải chơi theo quy tắc của trình duyệt):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

Con đầu lòng được hỗ trợ tương đối tốt: https://developer.mozilla.org/en-US/docs/CSS/:first-child

Bạn có thể sử dụng lý do tương tự cho phần đệm ngang bằng cách sử dụng tr:first-child td.

Ngoài ra, loại trừ cột đầu tiên bằng cách sử dụng các nottoán tử . Tuy nhiên, hỗ trợ cho điều này không tốt ngay bây giờ.

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}

Question 3

Trong thông số kỹ thuật CSS 1 và CSS 2 , phần đệm có sẵn cho tất cả các phần tử bao gồm <tr>. Tuy nhiên, hỗ trợ padding cho table-row ( <tr>) đã bị loại bỏ trong thông số kỹ thuật CSS 2.1 và CSS 3 . Tôi chưa bao giờ tìm thấy lý do đằng sau sự thay đổi khó chịu này cũng ảnh hưởng đến thuộc tính ký quỹ và một số thành phần bảng khác (đầu trang, chân trang và cột).

Cập nhật: vào tháng 2 năm 2015, chủ đề này trong www-style@w3c.orgdanh sách gửi thư đã thảo luận về việc thêm hỗ trợ đệm và đường viền cho hàng bảng. Điều này cũng sẽ áp dụng mô hình hộp tiêu chuẩn cho các phần tử bảng-hàng và bảng-cột. Nó sẽ cho phép các ví dụ như vậy . Chủ đề dường như gợi ý rằng hỗ trợ đệm hàng bảng chưa bao giờ tồn tại trong các tiêu chuẩn CSS vì nó sẽ có các công cụ bố cục phức tạp. Trong Bản nháp của người biên tập về mô hình hộp cơ bản CSS ngày 30 tháng 9 năm 2014 , các thuộc tính đệm và đường viền tồn tại cho tất cả các phần tử bao gồm các phần tử bảng và cột bảng. Nếu cuối cùng nó trở thành đề xuất W3C, ví dụ html + css của bạn cuối cùng có thể hoạt động như dự định trong các trình duyệt.

Question 4

cho đệm td

Question 5

lựa chọn 1

Bạn cũng có thể giải quyết nó bằng cách thêm một đường viền trong suốt vào hàng (tr), như thế này

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

Hoạt động giống như một sự quyến rũ, mặc dù nếu bạn cần các đường viền thông thường, thì đáng buồn là phương pháp này sẽ không hoạt động.

Lựa chọn 2

Vì các hàng hoạt động như một cách để nhóm các ô nên cách chính xác để thực hiện việc này, sẽ là sử dụng

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}

Question 6

Đây là một bài đăng rất cũ, nhưng tôi nghĩ tôi nên đăng giải pháp của mình cho một vấn đề tương tự mà tôi gặp phải gần đây.

Trả lời : Tôi đã giải quyết vấn đề này bằng cách hiển thị phần tử tr dưới dạng phần tử khối, tức là chỉ định CSS của display: block cho phần tử tr . Bạn có thể thấy điều này trong mẫu mã bên dưới.

<style>
  tr {
    display: block;
    padding-bottom: 20px;
  }
  table {
    border: 1px solid red;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <h2>Lorem Ipsum</h2>
        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida
          eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor
          luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque.
        </p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block
in order for padding to apply at the tr level.

Mở rộng đoạn mã

Question 7

Bạn chỉ cần thêm kiểu này vào bảng.

table {
    border-spacing: 15px;
}