A property used to manipulate the amount of space between borders of adjacent table cells.
|
Here's a simple and elegant solution, with a few caveats: Show
With that in mind, try this: td {padding:5px 8px;border:2px solid blue;background:#E0E0E0} /* lets say the cells all have this padding and border, and the gaps should be white */ tr.gapbefore td {overflow:visible} tr.gapbefore td::before, tr.gapbefore th::before { content:""; display:block; position:relative; z-index:1; width:auto; height:0; padding:0; margin:-5px -10px 5px; /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */ border-top:16px solid white; /* the size & color of the gap you want */ border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */ }What you're actually doing is sticking a rectangular ::before block into the top of all the cells in the row you want preceded by a gap. These blocks stick out of the cells a bit to overlap the existing borders, hiding them. These blocks are just a top and bottom border sandwiched together: The top border forms the gap, and the bottom border re-creates the appearance of the cells' original top border. Note that if you have a border around the table itself as well as the cells, you'll need to further increase the horizontal -ve margin of of your 'blocks'. So for a 4px table border, you'd instead use: margin:-5px -12px 5px; /* 14px = original 10px + 2px for 'uncollapsed' part of table border */And if your table uses border-collapse:separate instead of border-collapse:collapse, then you'll need to (a) use the full table border width: margin:-5px -14px 5px; /* 14px = original 10px + 4px full width of table border */... and also (b) replace the double-width of border that now needs to appear below the gap: border-bottom:4px solid blue; /* i.e. 4px = cell top border + previous row's bottom border */The technique is easily adapted to a .gapafter version, if you prefer, or to creating vertical (column) gaps instead of row gaps. Here's a codepen where you can see it in action: https://codepen.io/anon/pen/agqPpW View Discussion Improve Article Save Article View Discussion Improve Article Save Article The border-spacing Property is used to set the distance between the borders of neighboring cells in the Table. This property works only when the border-collapse property is set to no-collapse separate. Default Value:
Syntax: border-spacing: length|initial|inherit;Property values:
Syntax: border-spacing:initial;Example: html
GeeksforGeeks
The border-spacing Property
border-spacing: initial;
Output: Supported Browsers: The browser supported by css border-spacing property are listed below:
Which controls the spacing between adjacent cells in the table?Remarks. Use the CellSpacing property to control the spacing between adjacent cells in the Table control. This spacing is applied both vertically and horizontally.
What is used to adjust the space between the border and the contents of the cell?Cellpadding specifies the space between the border of a table cell and its contents (i.e) it defines the whitespace between the cell edge and the content of the cell.
...
Difference between Cellpadding and Cellspacing.. Which property is used to create a space between an element and its border?To create extra space between elements on the page CSS uses two properties, the padding and margin properties. The picture below shows what padding and margin do. Padding is the distance between the element's content area and any border that might be applied to the element.
Which property is use to add space between cells?The border-spacing property is used to set the spaces between cells of a table, and the border-collapse property specifies whether the border of the table is collapsed or not.
|
