Spacing between thead and tbody
I think I have it in this fiddle and I updated yours:
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
EDIT better & simpler:
tbody:before {
content:"@";
display:block;
line-height:10px;
text-indent:-99999px;
}
This way text is really invisible
Borders and margin between thead and tbody
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>How to give cell spacing to thead only?
Use one table and set :after to each th to make space
.table1 { border-spacing: 10px; border-collapse: collapse; border: solid;}
table.table1 th { border: solid; margin:5px; position: relative;}
table.table1 tr { border-bottom: solid;}th:after{ content: ''; border-right: 5px solid white; position: absolute; height: 100%; border: 2px solid; top: -3.5px; width: 1.5px; background: white; border-top-color: white; right: -5px;}th:last-child:after{border-right-color: white;border-bottom-color: white;right: -6px;}<table class="table1"> <thead> <tr> <th> col1 </th> <th> col2 </th> <th> col3 </th> <th> col4 </th> </tr> </thead> <tbody> <tr> <td> val1 </td> <td> val2 </td> <td> val3 </td> <td> val4 </td> </tr> <tr> <td> val21 </td> <td> val22 </td> <td> val23 </td> <td> val24 </td> </tr> </tbody></table>How to put spacing between TBODY elements
Try this, if you don't mind not having borders.
<style>
table {
border-collapse: collapse;
}
table tbody {
border-top: 15px solid white;
}
</style>
<table>
<tfoot>
<tr><td>footer</td></tr>
</tfoot>
<tbody>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
<tr><td>Body 1</td></tr>
</tbody>
<tbody>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
<tr><td>Body 2</td></tr>
</tbody>
<tbody>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
<tr><td>Body 3</td></tr>
</tbody>
</table>
How to remove extra border spacing between TBODY elements?
Note: This is a Webkit-specific bug. (Not present in Firefox, and as usual IE won't even load jsFiddle to test it.)
Unfortunately, there is no way to properly fix this. There is an open question on this very topic already. Additionally, there is an open bug report since Chrome 8 which has been confirmed to exist through Chrome 20 (and I can confirm in Chrome 25). There is also an open Webkit bug thread on this matter, which is still "NEW".
To be honest, I can't even find a workaround for this. Playing with border-spacing, margin, and even position don't seem to have an effect on this.
thead and tbody have a line of space I can't get rid of
I was able to solve it. Just simply add this to the style component.
I had forgotten to just simply remove the body or the head to discover first where the line was coming from.
After that, it was easier to navigate in dev tools and see the border was coming from the row headers.
.ant-table-thead > tr > th {
border-bottom: none;
}
How to add space between header and body table in Angular Material 13?
What you have seen here can work.
You must add modifiers in order to apply the style to material elements such as :host and ::ng-deep.
Then don't forget to play with the line-height attribute to modify the space between header and body.
This can be controversial because of supposed future deprecation and similarity with !important but it works well, and while you know what you do, it's not a bad thing to use them in my opinion.
I have forked your stackblitz project with the modifiers.
And here is a course for those modifiers, to understand how and when to use them.
How to add borders to thead and tbody which are always visible in an overflowable div
I could only figure out how to do it with JS. Also, your question says "around the visible area of table head and table body" but the screenshot shows just around tbody, not the table head.
https://jsfiddle.net/dgrogan/71bsnmfL/4
Side note: position: sticky doesn't work on thead or tr in Chrome. That won't be available in the stable channel until mid-2021 (https://crbug.com/702927). position: sticky does work on th though, if you want to try that.
// This would be more robust with ResizeObserver
dogs.style.height = container.clientHeight + "px"
dogs.style.width = container.clientWidth + "px" .my-table-container {
height: 200px;
width: 200px;
overflow-y: auto;
}
.my-table-container table {
border-collapse: collapse;
}
.my-table-container table thead tr {
top: 0;
position: sticky;
background: red;
}<div style="width: 200px; height: 200px; position: relative;">
<div style="position:absolute; border: 4px dashed black; box-sizing: border-box; height: 100%; z-index: 1; pointer-events: none;" id=dogs></div>
<div class="my-table-container" id=container>
<table>
<thead>
<tr>
<th>c1</th>
<th>c2</th>
<th>c3</th>
<th>c4</th>
<th>c5</th>
<th>c1</th>
<th>c2</th>
<th>c3</th>
<th>c4</th>
<th>c5</th>
<th>c1</th>
<th>c2</th>
<th>c3</th>
<th>c4</th>
<th>c5</th>
<th>c1</th>
<th>c2</th>
<th>c3</th>
<th>c4</th>
<th>c5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>Create a double border between thead and tbody
You need to set the border-collapse value to separate on the portions you don't want the border overlapping, then set the border-spacing to 1px on the side the borders will touch.
I also had to move the border definitions to the TH and TD tags, as I don't think border-collapse and border-spacing apply to thead and tbody (at least it didn't work when I tried).
You can see the updated results with my findings here: http://jsfiddle.net/jasongennaro/Pf7My/1/
I targeted the first set of td tags by using tr:first-child td. The makes sure only the top row as a black top border.
Related Topics
Angular Dynamic Background Images
Float a Div Above Page Content
Apply Different CSS Stylesheet for Different Parts of the Same Web Page
Print Background Colours in Chrome
How to Code CSS Media Queries Targeting All Mobile Devices and Tablets
How to Apply a Style to All Children of an Element
How to Change the Font-Size of a Select Option
Nesting Pseudo-Elements Inside Pseudo-Elements
How to Remove Blue "Selected" Outline on Buttons
Creating an Isoceles Trapezoid Shape
CSS Container Div Not Getting Height
Styling Twitter Bootstrap Buttons
What's a Querystring Doing in This Stylesheet's Href
How to Combine Two Media Queries
How to Center Content and Make the Background Cover the Full Column When Using CSS Grid