Css grid border collapse

border-collapse

The border-collapse CSS property sets whether cells inside a have shared or separate borders.

Try it

When cells are collapsed, the border-style value of inset behaves like ridge , and outset behaves like groove .

When cells are separated, the distance between cells is defined by the border-spacing property.

Syntax

/* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: revert-layer; border-collapse: unset; 

The border-collapse property is specified as a single keyword, which may be chosen from the list below.

Values

Adjacent cells have shared borders (the collapsed-border table rendering model).

Adjacent cells have distinct borders (the separated-border table rendering model).

Formal definition

Formal syntax

Examples

A colorful table of browser engines

HTML

table class="separate"> caption> code>border-collapse: separatecode> caption> tbody> tr> th>Browserth> th>Layout Engineth> tr> tr> td class="fx">Firefoxtd> td class="gk">Geckotd> tr> tr> td class="ed">Edgetd> td class="tr">EdgeHTMLtd> tr> tr> td class="sa">Safaritd> td class="wk">Webkittd> tr> tr> td class="ch">Chrometd> td class="bk">Blinktd> tr> tr> td class="op">Operatd> td class="bk">Blinktd> tr> tbody> table> table class="collapse"> caption> code>border-collapse: collapsecode> caption> tbody> tr> th>Browserth> th>Layout Engineth> tr> tr> td class="fx">Firefoxtd> td class="gk">Geckotd> tr> tr> td class="ed">Edgetd> td class="tr">EdgeHTMLtd> tr> tr> td class="sa">Safaritd> td class="wk">Webkittd> tr> tr> td class="ch">Chrometd> td class="bk">Blinktd> tr> tr> td class="op">Operatd> td class="bk">Blinktd> tr> tbody> table> 

CSS

.collapse  border-collapse: collapse; > .separate  border-collapse: separate; > table  display: inline-table; margin: 1em; border: dashed 5px; > table th, table td  border: solid 3px; > .fx  border-color: orange blue; > .gk  border-color: black red; > .ed  border-color: blue gold; > .tr  border-color: aqua; > .sa  border-color: silver blue; > .wk  border-color: gold blue; > .ch  border-color: red yellow green blue; > .bk  border-color: navy blue teal aqua; > .op  border-color: red; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

Collapsing borders using CSS Grid

Note that columns and rows of 120px will show both sides borders when box is set to 100px.

If fr value is used for columns, then do not set width on boxes (rows would follow same restriction).

Solution 2

I just found a simple way to achieve this, using css outline instead of border .

The outline property draws a line outside the element, so, having 1px gap collapses both lines.

As TylerH commented, outline does not take up space and can overlap, that is why you need to use the gap for it, if you want a 5px line, you should write 5px for both properties, the outline and the gap.

Solution 3

Consider controlling all sizing and spacing at the grid container level, not at the grid item level. Remove the borders and sizing applied to the items.

.container < display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 1 */ /* 2 */ grid-auto-rows: 100px; /* 3 */ grid-gap: 5px; /* 4 */ padding: 5px; background-color: tomato; >.block < background-color: lightgrey; >/* for demo only */ .block:nth-child(-n + 2)

 
0
 
0
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
31
 

jsFiddle demo

1. auto-fit : Fill in as many columns as can fit on the row. Overflow columns will wrap.
2. minmax() : Each column will be a minimum width of 120px and maximum width of whatever free space is available. The fr unit is comparable to flex layout’s flex-grow property.
3. grid-auto-rows : Automatically created rows (implicit rows) will be 100px in height.
4. grid-gap : 5px gutters all around. Shorthand for grid-column-gap and grid-row-gap .

Admin

Comments

I’m having fun getting my head around the new CSS Grid spec, but I’m running into trouble with borders. Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter? As you can see in the snippet below, the 10px borders stack ( 20px total) in-between blocks. I understand this issue isn’t unique to CSS Grids, but I’m hoping it’ll allow for new solutions for creating a uniform 10px border between all boxes and on the outer edges. My actual use-case is a calendar I’m making to practice working with Grids and React components. You can see the issue I’m running into here: . Since every month is different, I’ll have a lot of different edge-cases to consider.

Nice! I’m hoping to have some more control over what happens with the unfilled space. I’ll definitely keep this in mind for other applications.

@TimFoley If you do, do not set width on children, only col number in the template edit added a snippet example

@TimFoley an exemple with 2 grids side by side and 1fr for rows and columns : codepen.io/gc-nomade/pen/QvpBaO

While outline draws a line outside the element, it’s important to note it does not take up space, so it doesn’t cause changes to the layout. This also allows a weird ‘feature’ where you can have two elements side by side and their outlines can appear to ‘overlap’.

Источник

Collapsing borders using CSS Grid

I’m having fun getting my head around the new CSS Grid spec, but I’m running into trouble with borders.

Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter?

As you can see in the snippet below, the 10px borders stack ( 20px total) in-between blocks.

I understand this issue isn’t unique to CSS Grids, but I’m hoping it’ll allow for new solutions for creating a uniform 10px border between all boxes and on the outer edges.

My actual use-case is a calendar I’m making to practice working with Grids and React components. You can see the issue I’m running into here:

.

Since every month is different, I’ll have a lot of different edge-cases to consider.

asked Apr 29 ’17 01:04

Tim Foley

People also ask

The border-collapse property in CSS is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not. Syntax: border-collapse: separate|collapse|initial|inherit; Default Value : Its default value is separate.

Choose the CSS property that can be used for collapsing the borders between table cells? Explanation: The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.

2 Answers

You may use grid-gap and box-shadow:

Источник

CSS Collapsing borders using CSS Grid

The following tutorial shows you how to use CSS to do «CSS Collapsing borders using CSS Grid».

CSS Style

The CSS style to do «CSS Collapsing borders using CSS Grid» is

.container < display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); grid-auto-rows:100px; background-color:tomato; padding:5px; grid-gap:5px; > .block < background-color:lightgrey; > .block:nth-child(-n + 2) < visibility:hidden; >

HTML Body

body> div >"container"> div >"block"> 0!-- w w w . de m o 2 s . c o m-->  div >"block"> 0 div >"block"> 1 div >"block"> 2 div >"block"> 3 div >"block"> 4 div >"block"> 5 div >"block"> 6 div >"block"> 7 div >"block"> 8 div >"block"> 9 div >"block"> 10 div >"block"> 11 div >"block"> 12 div >"block"> 13 div >"block"> 14 div >"block"> 15 div >"block"> 16 div >"block"> 17 div >"block"> 18 div >"block"> 19 div >"block"> 20 div >"block"> 21 div >"block"> 22 div >"block"> 23 div >"block"> 24 div >"block"> 25 div >"block"> 26 div >"block"> 27 div >"block"> 28 div >"block"> 29 div >"block"> 30 div >"block"> 31   

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .container !-- w w w . d e m o 2 s . c om --> display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-auto-rows: 100px; background-color: tomato; padding: 5px; grid-gap: 5px; > .block < background-color: lightgrey; > .block:nth-child(-n + 2) < visibility: hidden; >  body> div >'container'> div >'block'>0 div >'block'>0 div >'block'>1 div >'block'>2 div >'block'>3 div >'block'>4 div >'block'>5 div >'block'>6 div >'block'>7 div >'block'>8 div >'block'>9 div >'block'>10 div >'block'>11 div >'block'>12 div >'block'>13 div >'block'>14 div >'block'>15 div >'block'>16 div >'block'>17 div >'block'>18 div >'block'>19 div >'block'>20 div >'block'>21 div >'block'>22 div >'block'>23 div >'block'>24 div >'block'>25 div >'block'>26 div >'block'>27 div >'block'>28 div >'block'>29 div >'block'>30 div >'block'>31    

Related

• CSS CheckBox inside Telerik Grid is always Check Even when Value if false
• CSS chess grid not hiding second span
• CSS choosing a responsive/fluid grid framework/template
• CSS Collapsing borders using CSS Grid
• CSS Combining CSS Grid with transform
• CSS Combining CSS Grid with transform (Demo 2)
• CSS Consistently scaling and positioning an SVG behind a text grid at different resolutions

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник