Reputation: 1022
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
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