How to set border to element?

Question

Why doesn't the border show around tbody in the following? I tried rules="groups" and the border appears, but only between the two tbody sections and it is collapsed.

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>

@Keith, tbody is a container element for the body part of a table element http://stackoverflow.com/questions/923655/is-there-a-direct-purpose-for-htmls-tbody — Patrick Evans, Sep 24 '13 at 19:12
Thanks, Barbara. display:block did get the border to show up, although without border-spacing. Is there any way to get border-spacing to work here? — George, Sep 24 '13 at 19:15
Altering the display type of the tbody has caused an anonymous table element to be inserted *within* the tbody. You can't style anonymous HTML elements. — cimmanon, Sep 24 '13 at 19:18

score 66 · Accepted Answer · answered Sep 24 '13 at 19:20

66

Add:

table {border-collapse: collapse;}

FIDDLE

answered Sep 24 '13 at 19:20

Riskbreaker

4,621
1
23
31

score 9 · Answer 2 · answered Sep 24 '13 at 19:21

9

Add display:block to your tbody style. Try this

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

You can test it out on this fiddle

answered Sep 24 '13 at 19:21

Brian Kinyua

4,456
1
18
17

Thanks, Brian. That did the trick. And the margin-bottom: 10px in your fiddle caused the borders to separate. – George Sep 24 '13 at 19:40
7

Note that modifying the display type of the tbody makes the columns not line up anymore: http://jsfiddle.net/bPL86/1/ – cimmanon Sep 24 '13 at 20:18
I see that, cimmanon. It's as if each tbody becomes its own table. Too bad. I guess the best I can do with that is make the first column a fixed width. – George Sep 24 '13 at 20:52
2

...I still think table was the solution no need for display:block but whatever serves your boat – Riskbreaker Sep 24 '13 at 23:35
@user1981459 that margin was for aesthetic purposes :) and you're welcome – Brian Kinyua Sep 25 '13 at 03:22

score 6 · Answer 3 · answered Feb 16 '18 at 16:33

6

Use box-shadow instead of border. It works no matter which value of border-collapse was applied. In addition, you can also apply border-radius to it.

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>

answered Feb 16 '18 at 16:33

Stickers

75,527
23
147
186

Your answer if I have seen it on time, would have saved me at least 4 hours of effort trying to set a border to a element. Now it saved me probably a few days of Googling that were coming ahead. And yet, I still wonder, why is it not possible to set a border to a regular HTML element like ? I saw on https://www.w3schools.com/tags/tag_tbody.asp that it's meant to be used only in particular context, e.g. with rowgroup, but this does not answer my question why is it so. Does anybody have an idea why was this designed this way at all in the first place? – apingaway Jun 01 '22 at 19:42

score 0 · Answer 4 · answered Aug 29 '19 at 08:19

.table_body, .tbody_td, .tbody_th 
{ border: 1px solid black; }
.table_body  { border-collapse: collapse; }
<table>
<thead> 
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td class="tbody_td">Jill</td>
<td class="tbody_td">Smith</td>
</tr>
<tr>
<td class="tbody_td">Eve</td>
<td class="tbody_td">Jackson</td>
</tr>
</tbody>
</table>

How to set border to element?

4 Answers4

Linked