CODEWITHSUNDEEP
htmlcss
Colby Willoughby
Colby Willoughby

Reputation: 63

In a regular table, is there a way to put an outer border on a table and leave out the table header?

I have a table, and at the top of the table is the table header with some text. I want to be able to only put a border on the table body, and leave the table header untouched, but I don't know how.

I have only tried applying a border to the default class for table body.

<table class="float-left">
 <thead>
  <tr class="text-center">
   <th>
    This is some text I want outside of the border
   </th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    This is some cell data I want inside the border
   </td>
  </tr>
 </tbody>
</table>

All I need is for the tbody to be the only bordered thing in the table, and when I try and give it a border, nothing happens.

Upvotes: 3

Views: 189

Answers (2)

j.j.
j.j.

Reputation: 2100

There are several ways to get this!

First and most straight: add border-collapse to table

table { border-collapse: collapse }
tbody { border: dashed }

2) use outline rather than border

tbody { outline: dashed }

(positive or negative outline-offset: can be used for adjustment)

3) use box-shadow rather than border

tbody { box-shadow: 0 0 0 1px }

Upvotes: 1

Sabrina Jewson
Sabrina Jewson

Reputation: 1518

tbody, tbody th, tbody td, tbody tr {
    border: 1px solid black;
}
<table class="float-left">
 <thead>
  <tr class="text-center">
   <th>header</th>
   <th>header</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>content</td>
   <td>content</td>
  </tr>
  <tr>
   <td>content</td>
   <td>content</td>
  </tr>
 </tbody>
</table>

This creates a border for tbody as well as all th, tr and td elements inside the tbody.

Upvotes: 0

Related Questions