Как установить интервал между элементами TBODY

Question 1

У меня есть такая таблица:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Я хотел бы поставить некоторый интервал между каждым элементом tbody, но отступы и поля не действуют. Любые идеи?

Question 2

Попробуйте это, если вы не против отсутствия границ.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Question 3

Примерно так будет работать, в зависимости от требований поддержки вашего браузера:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

Question 4

У людей всегда будут противоречивые мнения об использовании пустых элементов таблицы для макета страницы (о чем свидетельствует отрицательный голос в этом ответе). Я понимаю это, но иногда их легче использовать таким образом, когда вы работаете « быстро и грязно ».

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

    .separator{
             height: 50px;
    }

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

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

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

~~Если у вас нет границ на ячейках таблицы,~~ вы также можете определить высоту своей типичной ячейки или строки в таблице стилей, которая равномерно разделяет все строки вашей таблицы.

tr{
   height: 40px;
}

Question 5

Я был в беде расстояние между правильно множественным <tbody>с ::beforeпсевдо, в присутствии <tr>содержащий <td>с RowSpan в нескольких браузерах.

В принципе, если у вас есть такая <tbody>структура:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

И вы следите за тем, кто советует писать css на ::beforeпсевдоэлементе вот так:

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

Это повлияет на rowspan, заставляя таблицу "проигрывать" в течение второго, <tr>сколько <td>-rowspan присутствует в первом.

Итак, если кто-то сталкивается с ::beforeподобной проблемой, решение состоит в том, чтобы создать псевдо- стиль следующим образом:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

Вот скрипка

Question 6

Вот еще одна возможность, которая зависит от: first-child, который доступен не во всех браузерах:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Question 7

Просто установите displayкак, blockи он будет работать.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

Question 8

Из всех ответов, приведенных выше, только ответы djenson47 сохраняют разделение представления и содержания . Недостатком метода модели свернутой границы является то, что вы больше не можете использовать атрибуты границы таблицы или пространства ячеек для разделения отдельных ячеек. Вы можете возразить, что это хорошо, и есть некоторые обходные пути, но это может быть проблемой. Поэтому я считаю, что метод первого ребенка самый элегантный.

В качестве альтернативы вы также можете установить свойство переполнения вашего класса TBODY на любое другое значение, кроме «visible». Этот метод также позволяет сохранить модель разделенных границ:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Question 9

Поскольку отступы можно применять к TD, вы можете сделать трюк со знаком +. Тогда можно будет добавить верхний отступ к TD первого TR тела:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

Я добавил «tbody + tbody», чтобы у первого тела не было верхнего отступа. Однако это не обязательно.

Насколько я знаю, недостатков нет :), хотя старые браузеры не тестировал.

Question 10

Вы можете использовать border-spacingв таблице с группами строк таблицы, чтобы добавить пробел между этими группами. Хотя я не думаю, что есть способ указать, какие группы разделены, а какие нет.

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

Question 11

НОВЫЙ ОТВЕТ

Вы можете использовать столько <tbody>тегов, сколько захотите. До сих пор я не понимал, что W3C устраивает. Не хочу сказать, что мое нижеприведенное решение не работает (оно работает), но чтобы сделать то, что вы пытаетесь сделать, назначьте <tbody>классы своих тегов, а затем ссылайтесь на их отдельные <td>теги через CSS следующим образом:

table tbody.yourClass td {
    padding: 10px;
}

и ваш HTML таким образом:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Попробуйте этого парня :)

СТАРЫЙ ОТВЕТ

что бы вы ни делали, НЕ вставляйте пустые строки ...

у вас не должно быть более одного элемента tbody в вашей таблице. что вы можете сделать, так это установить атрибут class или id в своих <tr>элементах и указать соответствующие им <td>теги заполнения:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Вы даже можете назначить <tr>дополнительный класс top и bottom, чтобы они выполняли только верхний или нижний отступ соответственно:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

и в вашем HTML ваш <tr>тег будет выглядеть так:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Надеюсь это поможет!

Question 12

Ответ djensen47 отлично подходит для новых браузеров, однако, как было указано, в IE7 он не работает.

Мое решение этой проблемы для поддержки старых браузеров заключалось в том, чтобы обернуть содержимое каждой ячейки в div. Затем добавьте верхний край к div.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

Параметр высоты поддерживает высоту ячеек не менее 30 пикселей, чтобы предотвратить сворачивание любого цвета ячеек, используемого внутри div, вокруг текста. Верхний край создает желаемое пространство, делая всю строку выше.

Question 13

Наткнулся на это, пытаясь решить сам. Мне удалось поставить <br>тег прямо перед закрывающим </tbody>тегом. Это чисто визуальное исправление, но, похоже, оно работает в большинстве протестированных мной браузеров.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Также должен быть доступен.

Question 14

С благодарностью всем, кто ответил первым ...

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50%;
}
tbody:before {
  content: "";
  display:block;
  border-top: 15px solid white;
}
tbody tr {
  border-color: #000;
  border-style: solid;
}
tbody tr:first-of-type{
  border-width: 2px 2px 0 2px;
}
tbody tr:nth-of-type(1n+2){
  border-width: 0 2px 0 2px;
}
tbody tr:last-of-type{
  border-width: 0 2px 2px 2px;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
tbody tr:hover {
  background-color: #eee;
}
td {
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <th colspan="3">One</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Two</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Развернуть фрагмент

Answer 1

99

У меня есть такая таблица:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Я хотел бы поставить некоторый интервал между каждым элементом tbody, но отступы и поля не действуют. Любые идеи?

html css Nickf
источник

Правильно ли повторять теги «tbody»? Я всегда видел, что все «<tr> .. </tr>» находятся внутри одного тега «

tbody»

25

Да, это действительно так. В спецификации сказано: <! ELEMENT TABLE - - (CAPTION ?, (COL * | COLGROUP *), THEAD ?, TFOOT ?, TBODY +)>, что означает, что должно быть одно или несколько tbody. w3.org/TR/html4/struct/tables.html#h-11.2.1

nickf,

Answer 2

Правильно ли повторять теги «tbody»? Я всегда видел, что все «<tr> .. </tr>» находятся внутри одного тега «

tbody»

Answer 3

25

Да, это действительно так. В спецификации сказано: <! ELEMENT TABLE - - (CAPTION ?, (COL * | COLGROUP *), THEAD ?, TFOOT ?, TBODY +)>, что означает, что должно быть одно или несколько tbody. w3.org/TR/html4/struct/tables.html#h-11.2.1

nickf,

Answer 4

58

Попробуйте это, если вы не против отсутствия границ.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Дэйв Дженсен
источник

8

Попробуйте border-top: 15px solid transparent;

Стив Алмонд,

3

Хотел это подчеркнуть. Использовать transparentкак цвет границы. Что сказал @SteveAlmond.

iheartcsharp

если таблица / tbody / tr / td имеет цвет фона, установка цвета границы transparentдаст ему цвет фона элемента, практически неотличимый от тела элемента. Вам нужно будет явно окрасить границу в тот цвет, в который вы хотите, чтобы она отображалась (чтобы сделать ее якобы невидимой)

Гай Пасси,

Answer 5

8

Попробуйте border-top: 15px solid transparent;

Стив Алмонд,

Answer 6

3

Хотел это подчеркнуть. Использовать transparentкак цвет границы. Что сказал @SteveAlmond.

iheartcsharp

Answer 7

если таблица / tbody / tr / td имеет цвет фона, установка цвета границы transparentдаст ему цвет фона элемента, практически неотличимый от тела элемента. Вам нужно будет явно окрасить границу в тот цвет, в который вы хотите, чтобы она отображалась (чтобы сделать ее якобы невидимой)

Гай Пасси,

Answer 8

83

Примерно так будет работать, в зависимости от требований поддержки вашего браузера:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

MacNimble
источник

1

Это единственное решение, которое работает, когда у ваших ячеек есть фон, которого не должно быть в пространстве.

Laradda

У меня это сработало. Есть ли недостатки? Кроме того, почему два двоеточия?

nh2

Отличное решение. Всё доступно!

Jason T Featheringham

1

@ nh2: двойные двоеточия предназначены для псевдосодержания, а одинарное двоеточие - для псевдоселекторов. Это обновление синтаксиса CSS. Раньше все использовали только одно двоеточие. Старые браузеры не поддерживают двойное двоеточие (например, IE <= 8).

dbmikus

3

Разве не безопаснее пользоваться display: table-row;?

Рэйчел

Answer 9

1

Это единственное решение, которое работает, когда у ваших ячеек есть фон, которого не должно быть в пространстве.

Laradda

Answer 10

У меня это сработало. Есть ли недостатки? Кроме того, почему два двоеточия?

nh2

Answer 11

Отличное решение. Всё доступно!

Jason T Featheringham

Answer 12

1

@ nh2: двойные двоеточия предназначены для псевдосодержания, а одинарное двоеточие - для псевдоселекторов. Это обновление синтаксиса CSS. Раньше все использовали только одно двоеточие. Старые браузеры не поддерживают двойное двоеточие (например, IE <= 8).

dbmikus

Answer 13

3

Разве не безопаснее пользоваться display: table-row;?

Рэйчел

Answer 14

20

У людей всегда будут противоречивые мнения об использовании пустых элементов таблицы для макета страницы (о чем свидетельствует отрицательный голос в этом ответе). Я понимаю это, но иногда их легче использовать таким образом, когда вы работаете « быстро и грязно ».

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

    .separator{
             height: 50px;
    }

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

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

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

~~Если у вас нет границ на ячейках таблицы,~~ вы также можете определить высоту своей типичной ячейки или строки в таблице стилей, которая равномерно разделяет все строки вашей таблицы.

tr{
   height: 40px;
}

kevtrout
источник

ну, если вы собираетесь добавить дополнительную разметку, почему бы просто не поместить класс в первую строку каждого тела?

nickf

Что ж, это может быть связано с тем, что строки являются сгенерированным кодом, и добавление отдельной строки в разметку может быть более удобным в обслуживании, чем создание особого случая для первой строки сгенерированного содержимого.

Рольф Рандер,

12

Голосуйте вниз, сколько хотите, но это единственное решение без недостатков - и даже если оно нарушает разделение, пустая строка не такая уж большая проблема, IMO.

Xkeeper

11

Без недостатков моя задница! Попробуйте использовать для этого программу чтения с экрана и обратите внимание на неправильное количество строк. А еще лучше попробуйте скопировать и вставить таблицу в электронную таблицу. Если у вас много контента, вы будете переформатировать его часами. Таблицы предназначены для отображения данных (и должны быть чрезвычайно доступными), а не для отображения разделов между разделами.

Джейсон Т. Фезерингем

Это только наглядно. Имейте в виду, что HTML - это также документы, которые можно обрабатывать, поэтому содержимое внутри них должно быть хорошо отформатировано. Как упоминалось выше, скопировать и вставить таблицу или использовать программу чтения с экрана просто не удастся. Такой дизайн не следует поощрять. :: контентное решение лучше, потому что оно не портит разметку.

павел-кузник

Answer 15

ну, если вы собираетесь добавить дополнительную разметку, почему бы просто не поместить класс в первую строку каждого тела?

nickf

Answer 16

Что ж, это может быть связано с тем, что строки являются сгенерированным кодом, и добавление отдельной строки в разметку может быть более удобным в обслуживании, чем создание особого случая для первой строки сгенерированного содержимого.

Рольф Рандер,

Answer 17

12

Голосуйте вниз, сколько хотите, но это единственное решение без недостатков - и даже если оно нарушает разделение, пустая строка не такая уж большая проблема, IMO.

Xkeeper

Answer 18

11

Без недостатков моя задница! Попробуйте использовать для этого программу чтения с экрана и обратите внимание на неправильное количество строк. А еще лучше попробуйте скопировать и вставить таблицу в электронную таблицу. Если у вас много контента, вы будете переформатировать его часами. Таблицы предназначены для отображения данных (и должны быть чрезвычайно доступными), а не для отображения разделов между разделами.

Джейсон Т. Фезерингем

Answer 19

Это только наглядно. Имейте в виду, что HTML - это также документы, которые можно обрабатывать, поэтому содержимое внутри них должно быть хорошо отформатировано. Как упоминалось выше, скопировать и вставить таблицу или использовать программу чтения с экрана просто не удастся. Такой дизайн не следует поощрять. :: контентное решение лучше, потому что оно не портит разметку.

павел-кузник

Answer 20

Я был в беде расстояние между правильно множественным <tbody>с ::beforeпсевдо, в присутствии <tr>содержащий <td>с RowSpan в нескольких браузерах.

В принципе, если у вас есть такая <tbody>структура:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

И вы следите за тем, кто советует писать css на ::beforeпсевдоэлементе вот так:

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

Это повлияет на rowspan, заставляя таблицу "проигрывать" в течение второго, <tr>сколько <td>-rowspan присутствует в первом.

Итак, если кто-то сталкивается с ::beforeподобной проблемой, решение состоит в том, чтобы создать псевдо- стиль следующим образом:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

Вот скрипка

Answer 21

6

Вот еще одна возможность, которая зависит от: first-child, который доступен не во всех браузерах:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Дэйв Дженсен
источник

3

Это не будет работать очень хорошо, если у вас есть что-то, что зависит от положения содержимого относительно размера ячейки, например, тень блока, фоновые изображения или многое другое.

Xkeeper

1

Чтобы прояснить, как другие находят этот ответ в Google, я полагаю, поскольку это было написано в 2008 году, этот ответ сейчас (2015) имеет полную поддержку во всех основных браузерах? По крайней мере, проверка на caniuse.com первенца, кажется, хорошо поддерживается?

redfox05 08

Answer 22

3

Это не будет работать очень хорошо, если у вас есть что-то, что зависит от положения содержимого относительно размера ячейки, например, тень блока, фоновые изображения или многое другое.

Xkeeper

Answer 23

1

Чтобы прояснить, как другие находят этот ответ в Google, я полагаю, поскольку это было написано в 2008 году, этот ответ сейчас (2015) имеет полную поддержку во всех основных браузерах? По крайней мере, проверка на caniuse.com первенца, кажется, хорошо поддерживается?

redfox05 08

Answer 24

6

Просто установите displayкак, blockи он будет работать.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

user007
источник

1

этот ответ должен быть принятым ответом, потому что он единственный, который позволяет использовать тело с границами и столбцы без границ.

robsonrosa 05

13

display:blockнарушает выравнивание столбцов между элементами тела. Вы больше не пользуетесь преимуществами механизма компоновки стола

М. Конрад,

Answer 25

1

этот ответ должен быть принятым ответом, потому что он единственный, который позволяет использовать тело с границами и столбцы без границ.

robsonrosa 05

Answer 26

13

display:blockнарушает выравнивание столбцов между элементами тела. Вы больше не пользуетесь преимуществами механизма компоновки стола

М. Конрад,

Answer 27

Из всех ответов, приведенных выше, только ответы djenson47 сохраняют разделение представления и содержания . Недостатком метода модели свернутой границы является то, что вы больше не можете использовать атрибуты границы таблицы или пространства ячеек для разделения отдельных ячеек. Вы можете возразить, что это хорошо, и есть некоторые обходные пути, но это может быть проблемой. Поэтому я считаю, что метод первого ребенка самый элегантный.

В качестве альтернативы вы также можете установить свойство переполнения вашего класса TBODY на любое другое значение, кроме «visible». Этот метод также позволяет сохранить модель разделенных границ:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Answer 28

Я хотел сделать что-то подобное, это идеально подходит для меня

Эруант

Answer 29

Поскольку отступы можно применять к TD, вы можете сделать трюк со знаком +. Тогда можно будет добавить верхний отступ к TD первого TR тела:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

Я добавил «tbody + tbody», чтобы у первого тела не было верхнего отступа. Однако это не обязательно.

Насколько я знаю, недостатков нет :), хотя старые браузеры не тестировал.

Answer 30

Вы можете использовать border-spacingв таблице с группами строк таблицы, чтобы добавить пробел между этими группами. Хотя я не думаю, что есть способ указать, какие группы разделены, а какие нет.

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

Answer 31

НОВЫЙ ОТВЕТ

Вы можете использовать столько <tbody>тегов, сколько захотите. До сих пор я не понимал, что W3C устраивает. Не хочу сказать, что мое нижеприведенное решение не работает (оно работает), но чтобы сделать то, что вы пытаетесь сделать, назначьте <tbody>классы своих тегов, а затем ссылайтесь на их отдельные <td>теги через CSS следующим образом:

table tbody.yourClass td {
    padding: 10px;
}

и ваш HTML таким образом:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Попробуйте этого парня :)

СТАРЫЙ ОТВЕТ

что бы вы ни делали, НЕ вставляйте пустые строки ...

у вас не должно быть более одного элемента tbody в вашей таблице. что вы можете сделать, так это установить атрибут class или id в своих <tr>элементах и указать соответствующие им <td>теги заполнения:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Вы даже можете назначить <tr>дополнительный класс top и bottom, чтобы они выполняли только верхний или нижний отступ соответственно:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

и в вашем HTML ваш <tr>тег будет выглядеть так:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Надеюсь это поможет!

Answer 32

Ответ djensen47 отлично подходит для новых браузеров, однако, как было указано, в IE7 он не работает.

Мое решение этой проблемы для поддержки старых браузеров заключалось в том, чтобы обернуть содержимое каждой ячейки в div. Затем добавьте верхний край к div.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

Параметр высоты поддерживает высоту ячеек не менее 30 пикселей, чтобы предотвратить сворачивание любого цвета ячеек, используемого внутри div, вокруг текста. Верхний край создает желаемое пространство, делая всю строку выше.

Answer 33

Наткнулся на это, пытаясь решить сам. Мне удалось поставить <br>тег прямо перед закрывающим </tbody>тегом. Это чисто визуальное исправление, но, похоже, оно работает в большинстве протестированных мной браузеров.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Также должен быть доступен.

Answer 34

С благодарностью всем, кто ответил первым ...

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50%;
}
tbody:before {
  content: "";
  display:block;
  border-top: 15px solid white;
}
tbody tr {
  border-color: #000;
  border-style: solid;
}
tbody tr:first-of-type{
  border-width: 2px 2px 0 2px;
}
tbody tr:nth-of-type(1n+2){
  border-width: 0 2px 0 2px;
}
tbody tr:last-of-type{
  border-width: 0 2px 2px 2px;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
tbody tr:hover {
  background-color: #eee;
}
td {
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <th colspan="3">One</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Two</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Развернуть фрагмент

Как установить интервал между элементами TBODY

Ответы:

НОВЫЙ ОТВЕТ

СТАРЫЙ ОТВЕТ