Как установить границу для элемента tbody?

Почему граница не отображается вокруг tbody в следующем? Пробовал rules="groups" и граница появляется, но только между двумя разделами tbody и она свернута.

table.sectioned tbody {
  border: 2px solid black;
  border-collapse: separate;
  border-spacing: 4px;
}
<table class="sectioned">
  <tbody>
    <tr><td colspan="2"><b>General Data</b></td></tr>
    <tr><td>Tail Number</td><td>N0809021</td></tr>
    <tr><td>Type of Ownership</td><td>personal</td></tr>
    <tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
    <tr><td>Year of Manufacture</td><td>1999</td></tr>
    <tr><td>Use of Aircraft</td><td>private</td></tr>
    <tr><td>Start Date</td><td></td></tr>
    <tr><td>Policy Length</td><td>6 months</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
    <tr><td>Manufacturer</td><td></td></tr>
    <tr><td>Model</td><td></td></tr>
    <tr><td>Engine Make</td><td></td></tr>
    <tr><td>Number of Seats</td><td></td></tr>
  </tbody>
</table>


html css html-table
person George    schedule 24.09.2013    source источник
comment
Добавьте display:block и граница появится.   -  person Barbara Laird    schedule 24.09.2013
comment
@Keith, tbody - это элемент-контейнер для основной части элемента таблицы stackoverflow.com/questions/923655/   -  person Patrick Evans    schedule 24.09.2013
comment
Спасибо, Барбара. display:block действительно заставил границу отображаться, хотя и без границы. Есть ли способ заставить границы работать здесь?   -  person George    schedule 24.09.2013
comment
Изменение типа отображения tbody привело к вставке анонимного элемента таблицы внутри tbody. Вы не можете стилизовать анонимные элементы HTML.   -  person cimmanon    schedule 24.09.2013

Ответы (3)


arrow_upward
63
arrow_downward

Добавлять:

table {border-collapse: collapse;}

FIDDLE

person Riskbreaker    schedule 24.09.2013

arrow_upward
7
arrow_downward

Добавьте display:block к вашему стилю tbody. Попробуй это

tbody{
    display:block;
    border: 2px solid black;
    border-collapse: separate;
    border-spacing: 4px; 
}

Вы можете проверить это на этой скрипте.

person Brian Kinyua    schedule 24.09.2013
comment
Спасибо, Брайан. Это помогло. И margin-bottom: 10px в вашей скрипке вызвало разделение границ. - person George; 24.09.2013
comment
Обратите внимание, что изменение типа отображения tbody приводит к тому, что столбцы больше не выстраиваются в линию: jsfiddle.net/bPL86/1< /а> - person cimmanon; 25.09.2013
comment
Я вижу это, кимманон. Как будто каждое тело становится своим собственным столом. Очень жаль. Я думаю, лучшее, что я могу сделать, это сделать первый столбец фиксированной ширины. - person George; 25.09.2013
comment
... Я все еще думаю, что таблица была решением, не нуждающимся в отображении: блок, но все, что служит вашей лодке - person Riskbreaker; 25.09.2013
comment
@user1981459 user1981459 это поле было сделано для эстетических целей :) и пожалуйста - person Brian Kinyua; 25.09.2013

arrow_upward
4
arrow_downward

Используйте box-shadow вместо border. Это работает независимо от того, какое значение border-collapse было применено. Кроме того, вы также можете применить к нему border-radius.

tbody {
  box-shadow: 0 0 0 1px black;
  border-radius: 5px;
}
<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
    </tr>
  </tbody>
</table>

person Stickers    schedule 16.02.2018