Khoảng cách giữa hai hàng trong một bảng?

Điều này có thể thông qua CSS?

Tôi đang cô

tr.classname {
  border-spacing: 5em;
}

vô ích. Có lẽ tôi đang làm gì đó sai?

Bạn cần sử dụng phần đệm trên các tdyếu tố của bạn . Một cái gì đó như thế này nên làm thủ thuật. Tất nhiên, bạn có thể nhận được kết quả tương tự bằng cách sử dụng phần đệm trên cùng thay vì phần đệm phía dưới.

Trong mã CSS bên dưới, dấu lớn hơn có nghĩa là phần đệm chỉ được áp dụng cho tdcác phần tử là con trực tiếp đến trcác phần tử với lớp spaceUnder. Điều này sẽ làm cho nó có thể sử dụng các bảng lồng nhau. (Ô C và D trong mã ví dụ.) Tôi không chắc về hỗ trợ trình duyệt cho bộ chọn con trực tiếp (nghĩ IE 6), nhưng nó không nên phá mã trong bất kỳ trình duyệt hiện đại nào.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Điều này sẽ khiến phần nào như thế này:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Trong bảng cha, hãy thử thiết lập

border-collapse:separate; 
border-spacing:5em;

Cộng với một tuyên bố biên giới, và xem nếu điều này đạt được hiệu quả mong muốn của bạn. Mặc dù vậy, hãy coi chừng rằng IE không hỗ trợ mô hình "đường viền tách biệt".

Bạn có bảng với album id với bất kỳ dữ liệu nào ... Tôi đã bỏ qua trs và tds

<table id="albums" cellspacing="0">       
</table>

Trong css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

vì tôi có một hình nền phía sau bàn, giả mạo nó bằng đệm trắng sẽ không hoạt động. Tôi đã chọn đặt một hàng trống ở giữa mỗi hàng nội dung:

<tr class="spacer"><td></td></tr>

sau đó sử dụng css để cung cấp cho các hàng spacer một chiều cao nhất định và nền trong suốt.

Từ Mạng lưới nhà phát triển Mozilla :

Thuộc tính CSS khoảng cách viền chỉ định khoảng cách giữa các đường viền của các ô liền kề (chỉ dành cho mô hình viền tách biệt). Điều này tương đương với thuộc tính không gian ô trong HTML hiện tại, nhưng giá trị thứ hai tùy chọn có thể được sử dụng để đặt khoảng cách ngang và dọc khác nhau.

Đó là phần cuối cùng thường được giám sát. Thí dụ:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

CẬP NHẬT

Bây giờ tôi hiểu rằng OP muốn các hàng riêng biệt, tách biệt để tăng khoảng cách. Tôi đã thêm một thiết lập với tbodycác yếu tố thực hiện điều đó mà không làm hỏng ngữ nghĩa. Tuy nhiên, tôi không chắc nó có được hỗ trợ trên tất cả các trình duyệt hay không. Tôi đã tạo nó trong Chrome.

Ví dụ dưới đây là để hiển thị cách bạn có thể làm cho nó trông giống như bảng tồn tại của các hàng riêng biệt, độ ngọt css đầy đủ. Cũng cho hàng đầu tiên khoảng cách nhiều hơn với tbodythiết lập. Hãy sử dụng!

Thông báo hỗ trợ: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Bạn có thể thử thêm hàng phân cách:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Bạn không thể thay đổi lề của một ô bảng. Nhưng bạn CÓ THỂ thay đổi phần đệm. Thay đổi phần đệm của TD, điều này sẽ làm cho ô lớn hơn và đẩy văn bản ra khỏi cạnh với phần đệm tăng lên. Tuy nhiên, nếu bạn có đường biên giới, nó vẫn không chính xác như bạn muốn.

Hãy xem sự sụp đổ đường viền: thuộc tính riêng biệt (mặc định) và khoảng cách đường viền .

Trước tiên, bạn phải phân tách chúng với thu gọn viền , sau đó bạn có thể xác định khoảng cách giữa các cột và hàng với khoảng cách viền .

Cả hai thuộc tính CSS này thực sự được hỗ trợ tốt trên mọi trình duyệt, xem tại đây .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

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

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Ok, bạn có thể làm

tr.classname td {background-color:red; border-bottom: 5em solid white}

Đảm bảo màu nền được đặt trên td chứ không phải hàng. Điều này sẽ hoạt động trên hầu hết các trình duyệt ... (Chrome, tức là & ff đã thử nghiệm)

Bạn cần đặt border-collapse: separate;trên bàn; hầu hết các bảng định kiểu mặc định của trình duyệt bắt đầu tại border-collapse: collapse;, điều này làm mất khoảng cách đường viền.

Ngoài ra, khoảng cách biên: đi trên TD, không phải TR.

Thử:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Bạn có thể sử dụng chiều cao dòng trong bảng:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Một câu trả lời quá muộn :)

Nếu bạn áp dụng float cho trcác phần tử, bạn có thể khoảng trắng giữa hai hàng với marginthuộc tính.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Để tạo ảo giác về khoảng cách giữa các hàng, hãy áp dụng màu nền cho hàng và sau đó tạo đường viền dày với màu trắng để tạo "khoảng trắng" :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Cách chính xác để cung cấp khoảng cách cho các bảng là sử dụng cellpadding và cellspaces, vd

<table cellpadding="4">

Tôi vấp phải điều này trong khi đấu tranh với một vấn đề tương tự. Tôi đã tìm thấy câu trả lời của Varun Natraaj khá hữu ích, nhưng thay vào đó tôi sẽ sử dụng đường viền trong suốt.

td { border: 1em solid transparent; }

Đường viền trong suốt vẫn có chiều rộng.

Hoạt động cho hầu hết các trình duyệt mới nhất trong năm 2015. Giải pháp đơn giản. Nó không hoạt động trong suốt, nhưng không giống như câu trả lời của Thoronwen, tôi không thể minh bạch để kết xuất với bất kỳ kích thước nào.

    tr {
      border-bottom:5em solid white;
    }

Chỉ cần đặt divbên trong tdvà thiết lập các kiểu sau div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Tôi nhận ra đây là một câu trả lời cho một chủ đề cũ và có thể không phải là giải pháp được yêu cầu, nhưng trong khi tất cả các giải pháp được đề xuất không làm những gì tôi cần, giải pháp này hiệu quả với tôi.

Tôi có 2 ô bảng, một ô có màu nền, ô còn lại có màu viền. Các giải pháp trên loại bỏ đường viền, do đó, ô bên phải sẽ xuất hiện lơ lửng giữa không trung. Giải pháp đã thực hiện thủ thuật là thay thế table, trvà tdvới div và các lớp tương ứng: bảng sẽ là div id="table_replacer", tr sẽ là div class="tr_replacer"và td sẽ là div class="td_replacer"(rõ ràng thay đổi thẻ đóng thành div)

Để có được giải pháp cho vấn đề của tôi, css là:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Hy vọng điều này sẽ giúp được ai đó.

Bạn có thể điền các phần tử <td /> bằng các phần tử <div /> và áp dụng bất kỳ lề nào cho các div mà bạn thích. Đối với không gian trực quan giữa các hàng, bạn có thể sử dụng hình nền lặp lại trên phần tử <tr />. (Đây là giải pháp tôi vừa sử dụng ngày hôm nay và dường như nó hoạt động trong cả IE6 và FireFox 3, mặc dù tôi không thử nghiệm thêm nữa.)

Ngoài ra, nếu bạn không thích sửa đổi mã máy chủ của mình để đặt <div /> s bên trong <td /> s, bạn có thể sử dụng jQuery (hoặc một cái gì đó tương tự) để tự động bọc nội dung <td /> trong <div / >, cho phép bạn áp dụng CSS như mong muốn.

Hoặc chỉ cần thêm một khoảng trống với chiều cao của lề ở giữa các hàng bạn muốn thêm khoảng cách

Đây là một giải pháp đơn giản và thanh lịch, với một vài lưu ý:

• Bạn thực sự không thể làm cho các khoảng trống trong suốt, bạn cần cung cấp cho chúng một màu cụ thể.
• Bạn không thể làm tròn các góc của đường viền trên & dưới các khoảng trống
• Bạn cần biết phần đệm và đường viền của các ô trong bảng

Với ý nghĩ đó, hãy thử điều này:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

Những gì bạn đang làm là dán một hình chữ nhật ::before khối vào đầu của tất cả các ô trong hàng bạn muốn trước một khoảng trống. Các khối này dính ra khỏi các ô một chút để chồng lên các đường viền hiện có, ẩn chúng. Các khối này chỉ là một đường viền trên và dưới được kẹp lại với nhau: Đường viền trên cùng tạo thành khoảng cách và đường viền dưới cùng tạo lại diện mạo của đường viền trên cùng ban đầu của các ô.

Lưu ý rằng nếu bạn có một đường viền xung quanh bảng cũng như các ô, bạn sẽ cần tăng thêm lề ngang của các 'khối' của mình. Vì vậy, đối với đường viền bảng 4px, thay vào đó, bạn sẽ sử dụng:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

Và nếu bảng của bạn sử dụng border-collapse:separatethay vì border-collapse:collapse, thì bạn sẽ cần (a) sử dụng chiều rộng đường viền bảng đầy đủ:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... Và cũng (b) thay thế chiều rộng gấp đôi của đường viền hiện cần xuất hiện bên dưới khoảng trống:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

Kỹ thuật này dễ dàng thích ứng với phiên bản .gapafter, nếu bạn thích hoặc để tạo các khoảng trống dọc (cột) thay vì các khoảng trống hàng.

Đây là một codepen nơi bạn có thể thấy nó hoạt động: https://codepen.io/anon/pen/agqPpW

Ở đây điều này hoạt động trơn tru:

#myOwnTable td { padding: 6px 0 6px 0;}

Tôi cho rằng bạn có thể tạo ra một bố cục chi tiết hơn bằng cách chỉ định td nào nếu cần.

làm điều này được hiển thị ở trên ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

loại bỏ căn chỉnh cột dọc, vì vậy hãy cẩn thận với cách bạn sử dụng nó

Bạn đã thử chưa:

tr.classname { margin-bottom:5em; }

Ngoài ra, mỗi td cũng có thể được điều chỉnh:

td.classname { margin-bottom:5em; }

hoặc là

 td.classname { padding-bottom:5em; }