Developer
Developer

Reputation: 1022

Borders and margin between thead and tbody

I'm trying to display borders between thead and tbody plus some margins using CSS.

    table thead  {
    	border: solid red 1px;
    	margin-bottom: 10px;
    }
    
    table tbody {
        border: solid green 1px;
    }
  <table>
    <thead>
      <tr>
        <th scope="col">Thumbnail</th>
        <th scope="col">Title</th>
        <th scope="col">Date Created</th>
        <th scope="col">View</th>
        <th scope="col">Edit</th>
        <th scope="col">Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="https://picsum.photos/25/25/?random&r=1" /></td>
        <td>Lorem ipsum</td>
        <td>Nov 3, 2017</td>
        <td>Icon-View</td>
        <td>Icon-Edit</td>
        <td>Icon-Delete</span></td>
      </tr>
    </tbody>
  </table>

CSS above has border and margin properties applied to thead but somehow borders are collapsing, I've tried border-collapse: separate to the table but didn't work.

Upvotes: 3

Views: 6673

Answers (1)

Itay Gal
Itay Gal

Reputation: 10824

You can use outline: thin solid to set the tbody and thead borders

thead {
  outline: thin solid red;
}

tbody {
  outline: thin solid green;
}

td{
  padding-top: 20px;
}
<table>
  <thead>
    <tr>
      <th scope="col">Thumbnail</th>
      <th scope="col">Title</th>
      <th scope="col">Date Created</th>
      <th scope="col">View</th>
      <th scope="col">Edit</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="https://picsum.photos/25/25/?random&r=1" /></td>
      <td>Lorem ipsum</td>
      <td>Nov 3, 2017</td>
      <td>Icon-View</td>
      <td>Icon-Edit</td>
      <td>Icon-Delete</td>
    </tr>
  </tbody>
</table>

Another option is to add an empty row to simulate the margin

thead {
  outline: thin solid red;
}

tr{
  outline: thin solid green;
}

tr:first-child{
  outline: thin solid transparent;
  height: 10px;
}
<table>
  <thead>
    <tr>
      <th scope="col">Thumbnail</th>
      <th scope="col">Title</th>
      <th scope="col">Date Created</th>
      <th scope="col">View</th>
      <th scope="col">Edit</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    </tr>
    <tr>
      <td><img src="https://picsum.photos/25/25/?random&r=1" /></td>
      <td>Lorem ipsum</td>
      <td>Nov 3, 2017</td>
      <td>Icon-View</td>
      <td>Icon-Edit</td>
      <td>Icon-Delete</td>
    </tr>
  </tbody>
</table>

Upvotes: 4

Related Questions