Css border-collapse property

Create A Collapsible

Step 1) Add HTML:


<button type=»button» class=»collapsible»>Open Collapsible</button><div class=»content»>  <p>Lorem ipsum…</p></div>

Step 2) Add CSS:

Style the accordion:

/* Style the button that is used to open and close the collapsible content */.collapsible {  background-color: #eee;  color: #444;  cursor: pointer;  padding: 18px;  width: 100%;  border: none;  text-align: left;  outline: none;  font-size: 15px;}/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .collapsible:hover {  background-color: #ccc;}/* Style the collapsible content. Note: hidden by default */.content {  padding: 0 18px;  display: none;  overflow: hidden;  background-color: #f1f1f1;}

Step 3) Add JavaScript:

var coll = document.getElementsByClassName(«collapsible»);var i; for (i = 0; i < coll.length; i++) {  coll.addEventListener(«click», function() {    this.classList.toggle(«active»);    var content = this.nextElementSibling;    if (content.style.display === «block») {      content.style.display = «none»;    } else {      content.style.display = «block»;    }  });}

Basic Collapsible

Collapsibles are useful when you want to hide and show large amount of content:


Click Me Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<button data-toggle=»collapse» data-target=»#demo»>Collapsible</button><div id=»demo» class=»collapse»>Lorem ipsum dolor text….</div>

The class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button.

To control (show/hide) the collapsible content, add the attribute to an <a> or a <button> element. Then add the attribute to connect the button with the collapsible content (<div id=»demo»>).

Note: For <a> elements, you can use the attribute instead of the attribute:

<a href=»#demo» data-toggle=»collapse»>Collapsible</a><div id=»demo» class=»collapse»>Lorem ipsum dolor text….</div>


By default, the collapsible content is hidden. However, you can add the class to show the content by default:

Create a Collapsed Sidepanel

Step 1) Add HTML:

Example

<div id=»mySidepanel» class=»sidepanel»>  <a href=»javascript:void(0)» class=»closebtn» onclick=»closeNav()»>&times;</a>  <a href=»#»>About</a>  <a href=»#»>Services</a>  <a href=»#»>Clients</a>  <a href=»#»>Contact</a> </div><button class=»openbtn» onclick=»openNav()»>&#9776; Toggle Sidepanel</button> <h2>Collapsed Sidepanel</h2><p>Content…</p>

Step 2) Add CSS:

Example

/* The sidepanel menu */.sidepanel {  height: 250px; /* Specify a height */  width: 0; /* 0 width — change this with JavaScript */  position: fixed; /* Stay in place */  z-index: 1; /* Stay on top */  top: 0;  left: 0;  background-color: #111; /* Black*/  overflow-x: hidden; /* Disable horizontal scroll */  padding-top: 60px; /* Place content 60px from the top */  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */ }/* The sidepanel links */.sidepanel a {  padding: 8px 8px 8px 32px;  text-decoration: none;  font-size: 25px;  color: #818181;  display: block;  transition: 0.3s;}/* When you mouse over the navigation links, change their color */.sidepanel a:hover {  color: #f1f1f1;}/* Position and style the close button (top right corner) */.sidepanel .closebtn {  position: absolute;  top: 0;  right: 25px;  font-size: 36px;  margin-left: 50px;}/* Style the button that is used to open the sidepanel */.openbtn {  font-size: 20px;  cursor: pointer;  background-color: #111;  color: white;  padding: 10px 15px;  border: none;}.openbtn:hover {  background-color: #444;}

Step 3) Add JavaScript:

Example

/* Set the width of the sidebar to 250px (show it) */function openNav() {  document.getElementById(«mySidepanel»).style.width = «250px»;}/* Set the width of the sidebar to 0 (hide it) */function closeNav() {  document.getElementById(«mySidepanel»).style.width = «0»;}

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

示例

HTML

<table class="separate">
  <caption><code>border-collapse: separate</code></caption>
  <tbody>
    <tr><th>Browser</th> <th>Layout Engine</th></tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
  </tbody>
</table>
<table class="collapse">
  <caption><code>border-collapse: collapse</code></caption>
  <tbody>
    <tr><th>Browser</th> <th>Layout Engine</th></tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
  </tbody>
</table>

CSS

.collapse {
    border-collapse: collapse;
}
.separate {
    border-collapse: separate;
}
table {
    display: inline-table;
    margin: 1em;
    border: dashed 6px;
    border-width: 6px;
}
table th, table td {
    border: solid 3px;
}
.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ie { 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; }

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


The following example shows a simple accordion by extending the panel component.

Note: Use the attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Example

<div class=»panel-group» id=»accordion»>  <div class=»panel panel-default»>    <div class=»panel-heading»>      <h4 class=»panel-title»>        <a data-toggle=»collapse» data-parent=»#accordion» href=»#collapse1″>        Collapsible Group 1</a>      </h4>    </div>    <div id=»collapse1″ class=»panel-collapse collapse in»>      <div class=»panel-body»>Lorem ipsum dolor sit amet, consectetur adipisicing elit,      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat.</div>    </div>  </div>  <div class=»panel panel-default»>    <div class=»panel-heading»>      <h4 class=»panel-title»>        <a data-toggle=»collapse» data-parent=»#accordion» href=»#collapse2″>        Collapsible Group 2</a>      </h4>    </div>    <div id=»collapse2″ class=»panel-collapse collapse»>      <div class=»panel-body»>Lorem ipsum dolor sit amet, consectetur adipisicing elit,      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat.</div>    </div>  </div>  <div class=»panel panel-default»>    <div class=»panel-heading»>      <h4 class=»panel-title»>        <a data-toggle=»collapse» data-parent=»#accordion» href=»#collapse3″>        Collapsible Group 3</a>      </h4>    </div>    <div id=»collapse3″ class=»panel-collapse collapse»>      <div class=»panel-body»>Lorem ipsum dolor sit amet, consectetur adipisicing elit,      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat.</div>    </div>  </div></div>

浏览器兼容性

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 5 Opera Full support 4 Safari Full support 1.2 WebView Android Full support 2.3 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 10.1 Safari iOS Full support 3 Samsung Internet Android Full support 1.0

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Examples

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

CSS

/* Define look of the table */
table {
  border-width: 3px;
  background-color: #52E396;
}
tr, td {
  padding: 2px;
}

/* border-style example classes */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Via data-* Attributes

Just add data-toggle=»collapse» and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class in.

Example

<button class=»btn» data-toggle=»collapse» data-target=»#demo»>Collapsible</button><div id=»demo» class=»collapse»>Some text..</div>

Tip: To add accordion-like group management to a collapsible control, add the data attribute data-parent=»#selector».


С этим читают