Простір між двома рядками в таблиці?

Це можливо за допомогою CSS?

я намагаюся

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

безрезультатно. Може я роблю щось не так?

Потрібно використовувати набивання на своїх tdелементах. Щось подібне повинно зробити трюк. Звичайно, ви можете отримати той же результат, використовуючи верхню підкладку замість нижньої підкладки.

У наведеному нижче коді CSS знак «більший за» означає, що накладка застосовується лише до tdелементів, що спрямовують дітей до trелементів класу spaceUnder. Це дасть можливість використовувати вкладені таблиці. (Стільниці C і D у прикладі коду.) Я не надто впевнений у підтримці браузера для прямого дочірнього селектора (думаю, що IE 6), але він не повинен порушувати код у будь-яких сучасних браузерах.

/* 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>

Це має виглядати приблизно так:

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

У батьківській таблиці спробуйте встановити

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

Плюс декларацію про кордону, і подивіться, чи досягне це бажаний ефект Але будьте обережні, що IE не підтримує модель "розділених кордонів".

У вас є таблиця з альбомами id з будь-якими даними ... Я пропустив trs і tds

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

У css:

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

оскільки у мене за столом фонове зображення, підробляти його білою оббивкою не вийде. Я вирішив розмістити порожній рядок між кожним рядком вмісту:

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

потім використовуйте css, щоб надати міжряддям рядки певної висоти та прозорого фону.

Від мережі розробників Mozilla :

Властивість CSS з інтервалом для кордону вказує відстань між межами сусідніх комірок (лише для моделі розділених меж). Це еквівалентно атрибуту простору клітинок у презентаційному HTML, але необов'язкове друге значення можна використовувати для встановлення різних горизонтальних та вертикальних інтервалів.

Останню частину часто наглядають. Приклад:

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

ОНОВЛЕННЯ

Тепер я розумію, що ОП хоче, щоб конкретні, окремі рядки мали збільшений інтервал. Я додав налаштування з tbodyелементами, що виконує це, не руйнуючи семантики. Однак я не впевнений, чи підтримується він у всіх браузерах. Я зробив це в Chrome.

Наведений нижче приклад показує, як можна зробити так, щоб таблиця існувала окремими рядами, повною присмаком css. Також перший рядок дав більше інтервалів із tbodyналаштуванням. Сміливо користуйтесь!

Повідомлення про підтримку: 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>

Ви можете спробувати додати рядок розділення:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Ви не можете змінити поле комірки таблиці. Але МОЖЕТЕ змінити прокладку. Змініть прокладку TD, що зробить клітинку більшою і відсуне текст убік із збільшенням прокладки. Якщо у вас є прикордонні лінії, це все одно не буде саме тим, що ви хочете.

Погляньте на межу-згортання: окремий атрибут (за замовчуванням) та властивість пробігу кордонів .

По-перше, ви повинні відокремити їх за допомогою обмеження кордону , потім ви можете визначити пробіл між стовпцями та рядками з проміжком між межами .

Обидва ці властивості CSS насправді добре підтримуються у кожному веб- переглядачі .

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>

Гаразд, можна зробити

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

Переконайтеся, що колір тла встановлений на td, а не на рядку. Це має працювати в більшості браузерів ... (Chrome, тобто & ff тестується)

Вам потрібно встановити border-collapse: separate;на стіл; починається з більшості таблиць стилів за замовчуванням у веб-переглядачах border-collapse: collapse;, які викреслюють міжряддя

Крім того, інтервал між межами: йде на TD, а не на TR.

Спробуйте:

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

Ви можете використовувати висоту рядка в таблиці:

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

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

Занадто пізня відповідь :)

Якщо ви застосовуєте float до trелементів, ви можете пропускати між двома рядками marginатрибут.

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

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

Для створення ілюзії проміжку між рядками нанесіть на рядок колір тла, а потім створіть товсту облямівку з білим кольором, щоб створився "пробіл" :)

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

Правильним способом надання інтервалу для таблиць є використання накладки на стільниці та простору, наприклад

<table cellpadding="4">

Я натрапив на це, борючись із подібним питанням. Я знайшов відповідь Варуна Натрая дуже корисною, але замість цього я скористався прозорою рамкою.

td { border: 1em solid transparent; }

Прозорі межі все ще мають ширину.

Працює для більшості останніх браузерів у 2015 році. Просте рішення. Це не працює для прозорості, але на відміну від відповіді Торонвена, я не можу отримати прозорий візуалізацію будь-якого розміру.

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

Просто помістіть divвсередину tdта встановіть наступні стилі div:

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

Я усвідомлюю, що це відповідь на стару тему, і це може бути не запитуване рішення, але, хоча всі запропоновані рішення не виконували те, що мені потрібно, це рішення працювало на мене.

У мене було 2 комірки таблиці, одна з кольором фону, а інша з кольором рамки. Вищеописані рішення видаляють межу, тому клітина праворуч, здавалося б, плаває в повітрі. Рішення , яке зробило трюк повинні було замінити table, trі tdз дивами і відповідними класами: таблиця буде div id="table_replacer", тр б div class="tr_replacer"і тд буде div class="td_replacer"(змінити закривають тег для діви , а також , очевидно)

Щоб отримати рішення для моєї проблеми, CSS:

#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;}

Сподіваюся, що це комусь допоможе.

Ви можете заповнити елементи <td /> елементами <div /> та застосувати будь-які поля до тих дівок, які вам подобаються. Для візуального простору між рядками можна використовувати повторюване фонове зображення на елементі <tr />. (Це рішення, яке я щойно використовував сьогодні, і, здається, працює як в IE6, так і в FireFox 3, хоча я більше не перевіряв це.)

Крім того, якщо ви проти змінити код вашого сервера, щоб помістити <div /> s всередину <td /> s, ви можете використовувати jQuery (або щось подібне) для динамічного загортання вмісту <td /> у <div / >, що дозволяє застосувати CSS за бажанням.

Або просто додайте пробіл з висотою поля між рядками, які ви хочете додати між проміжками

Ось просте і елегантне рішення з кількома застереженнями:

• Насправді ви не можете зробити прогалини прозорими, вам потрібно надати їм певний колір.
• Ви не можете заокруглювати кути меж вище та нижче прогалин
• Вам потрібно знати прокладки та межі комірок вашої таблиці

Зважаючи на це, спробуйте це:

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 */
}

Те, що ви насправді робите, - це вклеїти прямокутний ::beforeблок у верхню частину всіх комірок у рядку, який ви хочете, щоб передував проміжок. Ці блоки трохи стирчать з комірок, щоб перекривати існуючі межі, приховуючи їх. Ці блоки є лише верхньою і нижньою облямівкою, прошиті разом: Верхня межа утворює проміжок, а нижня межа створює зовнішній вигляд початкової верхньої межі комірок.

Зауважте, що якщо у вас є межа навколо самого столу, а також комірок, вам потрібно буде додатково збільшити горизонтальний -ve межа ваших "блоків". Отже, для межі таблиці 4px ви замість цього використовуєте:

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

І якщо ваша таблиця використовує border-collapse:separateзамість border-collapse:collapse, тоді вам потрібно (a) використовувати повну ширину рамки таблиці:

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

... а також (b) замінити подвійну ширину межі, яка тепер повинна бути нижче проміжку:

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

Техніка легко пристосовується до версії .gapafter, якщо вам зручніше, або до створення вертикальних (стовпчикових) проміжків замість пропусків рядків.

Ось коден, де ви можете побачити його в дії: https://codepen.io/anon/pen/agqPpW

Тут це працює безперебійно:

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

Я припускаю, що ви могли б розробити більш дрібнозернистий макет, вказавши, який тд буде потрібен.

робимо це, як показано вище ...

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

видаляє вертикальне вирівнювання стовпця, тому будьте обережні, як ви його використовуєте

Ти намагався:

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

Крім того, кожен td може бути також відрегульований:

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

або

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