How to stop breaking tables border when page is spliting?


Tags: html,css,asp.net,frontend

Problem :

I want to have on my website cards with border made in CSS and showing 3 cards per column. The problem is that i don't want to split cards. My CSS:

<style>
.card {
    border-style: ridge;
    border-width: 3px;
}
.card-deck{
    -webkit-column-count:3;
     overflow-wrap:break-word;   
}
</style>

Cutted Cards

How to stop spliting cards?



Solution :

Add break-inside: avoid; to .card element:

.card {
    border-style: ridge;
    border-width: 3px;
    break-inside: avoid;
}

    CSS Howto..

    CSS / HTML: How to force horizontal scrollbar when table does not fit on screen?

    CSS - How to match class (one dynamic and one static) between two elements

    How to make the height of a div within a master page expand in a content page?

    How to draw a line from the middle of the page to the right side?

    How to set the width of a list, in css

    How do I add a custom CSS image to the target background behind a given layer of text in Squarespace?

    How could I use postcss-bem with css-modules or postcss-js in React component

    How to serve css files in djangos's flatpages?

    How to place elements on top of each other

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

    How to keep an image and text (vmax font) aligned when resizing browser?

    How to apply custom css class to extjs grid column, and remove it with delay?

    How to position a drop down list nav bar inside header in html css

    How to select 3rd div which has specific css class

    version control: how to control css and js compressed/minified versions between environments

    How to use one icon from different image files?

    Basic CSS: When applying effects to images in CSS, how do you exclude the banner image?

    How to vertical align the text inside a div in responsive layout

    How do I evenly space radio buttons

    How to prevent Twitter Bootstrap changing margins as width of page is extended

    How to use Grunt while continually compressing css / javascript

    How to properly use css will-change property?

    How to do something like border-top-left-color. [CSS]

    How can I create a searchbar like this?

    How to make a picture responsive that is on wordpress custom post type through HTML/CSS

    How to hide CSS background images that use !important

    How to make layout like notes in Google Keep using CSS?

    How to break up an HTML List using CSS Only

    How to debug CSS with Firebug for an element that only appears when clicked?