{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-border-collapse/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"e30a4dc4-c9f2-5d77-8b42-8079e17671fc","title":"Tailwind Border Collapse","slug":"/classes/tailwind-border-collapse/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"1 May 2024\",\n  \"title\": \"Tailwind Border Collapse\",\n  \"metaTitle\": \"Tailwind border collapse\",\n  \"metaDescription\": \"The tailwind border collapse utility class in Tailwind CSS allows you to control the collapsing behavior of borders in a table.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-border-collapse\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Border Collapse\"), mdx(\"p\", null, \"The tailwind border collapse utility class in Tailwind CSS allows you to control the collapsing behavior of borders in a table. With Tailwind's border collapse class, you can easily adjust whether the borders should collapse or separate between table cells.\"), mdx(\"h2\", null, \"Applying Tailwind Border Collapse\"), mdx(\"p\", null, \"To apply the tailwind border collapse behavior to a table, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-collapse-{value}\"), \" utility class, where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{value}\"), \" represents the desired behavior. Here are the available options:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"border-collapse\"), \": Borders collapse between table cells (default).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"border-separate\"), \": Borders are separate between table cells.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<table class=\\\"border-collapse\\\">\\n  <!-- Table content here -->\\n</table>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-green-100 p-10\"\n  }, mdx(\"table\", {\n    className: \"border-collapse w-full border border-green-400 bg-white  text-sm shadow-sm\"\n  }, mdx(\"thead\", {\n    className: \"bg-green-50\"\n  }, mdx(\"tr\", null, mdx(\"th\", {\n    className: \"w-1/2 border border-green-300 font-semibold p-4 text-green-900  text-left\"\n  }, \"Country\"), mdx(\"th\", {\n    className: \"w-1/2 border border-green-300 font-semibold p-4 text-green-900 text-left\"\n  }, \"Capital\"))), mdx(\"tbody\", null, mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-green-300 p-4 text-green-500\"\n  }, \"USA\"), mdx(\"td\", {\n    className: \"border border-green-300 p-4 text-green-500\"\n  }, \"Washington, D.C.\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-green-300 p-4 text-green-500\"\n  }, \"Australia\"), mdx(\"td\", {\n    className: \"border border-green-300 p-4 text-green-500\"\n  }, \"Canberra\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-green-300 p-4 text-green-500\"\n  }, \"China\"), mdx(\"td\", {\n    className: \"border border-green-300 p-4 text-green-500\"\n  }, \"Beijing\"))))), mdx(\"p\", null, \"If you want to keep the borders separate between table cells, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-separate\"), \" class:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<table class=\\\"border-separate\\\">\\n  <!-- Table content here -->\\n</table>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"overflow-hidden rounded-t-xl bg-purple-100 p-10\"\n  }, mdx(\"table\", {\n    className: \"w-full border-separate border border-purple-400 bg-white text-sm shadow-sm\"\n  }, mdx(\"thead\", {\n    className: \"bg-purple-50\"\n  }, mdx(\"tr\", null, mdx(\"th\", {\n    className: \"w-1/2 border border-purple-300 p-4 text-left font-semibold text-purple-900\"\n  }, \"Country\"), mdx(\"th\", {\n    className: \"w-1/2 border border-purple-300 p-4 text-left font-semibold text-purple-900\"\n  }, \"Capital\"))), mdx(\"tbody\", null, mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-purple-300 p-4 text-purple-500\"\n  }, \"USA\"), mdx(\"td\", {\n    className: \"border border-purple-300 p-4 text-purple-500\"\n  }, \"Washington, D.C.\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-purple-300 p-4 text-purple-500\"\n  }, \"Australia\"), mdx(\"td\", {\n    className: \"border border-purple-300 p-4 text-purple-500\"\n  }, \"Canberra\")), mdx(\"tr\", null, mdx(\"td\", {\n    className: \"border border-purple-300 p-4 text-purple-500\"\n  }, \"China\"), mdx(\"td\", {\n    className: \"border border-purple-300 p-4 text-purple-500\"\n  }, \"Beijing\"))))), mdx(\"h2\", null, \"Responsive Tailwind Border Collapse\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply the border collapse class responsively at different breakpoints. To use responsive tailwind border collapse classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:border-separate\"), \" applies the separate border collapse behavior starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<table class=\\\"border-collapse md:border-separate\\\">\\n  <!-- Table content here -->\\n</table>\\n\")), mdx(\"p\", null, \"In the above example, the table has the default border collapse behavior by default \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(border-collapse)\"), \", but starting from the medium breakpoint and above, the separate border collapse behavior is applied \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(md:border-separate)\"), \".\"), mdx(\"h2\", null, \"Tailwind Border Collapse Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-collapse\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-collapse: collapse;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-separate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border-collapse: separate;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=content2\"\n  }, \"Content\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-border-collapse","title":"Tailwind Border Collapse","items":[{"url":"#applying-tailwind-border-collapse","title":"Applying Tailwind Border Collapse"},{"url":"#preview","title":"Preview"},{"url":"#preview-1","title":"Preview"},{"url":"#responsive-tailwind-border-collapse","title":"Responsive Tailwind Border Collapse"},{"url":"#tailwind-border-collapse-class-table","title":"Tailwind Border Collapse Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-border-collapse.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind border collapse","lastUpdated":"1 May 2024","metaDescription":"The tailwind border collapse utility class in Tailwind CSS allows you to control the collapsing behavior of borders in a table."}}},"pageContext":{"id":"e30a4dc4-c9f2-5d77-8b42-8079e17671fc"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}