"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5167],{3905:function(t,e,d){d.d(e,{Zo:function(){return c},kt:function(){return p}});var n=d(7294);function a(t,e,d){return e in t?Object.defineProperty(t,e,{value:d,enumerable:!0,configurable:!0,writable:!0}):t[e]=d,t}function r(t,e){var d=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),d.push.apply(d,n)}return d}function l(t){for(var e=1;e<arguments.length;e++){var d=null!=arguments[e]?arguments[e]:{};e%2?r(Object(d),!0).forEach((function(e){a(t,e,d[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(d)):r(Object(d)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(d,e))}))}return t}function i(t,e){if(null==t)return{};var d,n,a=function(t,e){if(null==t)return{};var d,n,a={},r=Object.keys(t);for(n=0;n<r.length;n++)d=r[n],e.indexOf(d)>=0||(a[d]=t[d]);return a}(t,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(n=0;n<r.length;n++)d=r[n],e.indexOf(d)>=0||Object.prototype.propertyIsEnumerable.call(t,d)&&(a[d]=t[d])}return a}var o=n.createContext({}),s=function(t){var e=n.useContext(o),d=e;return t&&(d="function"==typeof t?t(e):l(l({},e),t)),d},c=function(t){var e=s(t.components);return n.createElement(o.Provider,{value:e},t.children)},h={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},m=n.forwardRef((function(t,e){var d=t.components,a=t.mdxType,r=t.originalType,o=t.parentName,c=i(t,["components","mdxType","originalType","parentName"]),m=s(d),p=a,b=m["".concat(o,".").concat(p)]||m[p]||h[p]||r;return d?n.createElement(b,l(l({ref:e},c),{},{components:d})):n.createElement(b,l({ref:e},c))}));function p(t,e){var d=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var r=d.length,l=new Array(r);l[0]=m;var i={};for(var o in e)hasOwnProperty.call(e,o)&&(i[o]=e[o]);i.originalType=t,i.mdxType="string"==typeof t?t:a,l[1]=i;for(var s=2;s<r;s++)l[s]=d[s];return n.createElement.apply(null,l)}return n.createElement.apply(null,d)}m.displayName="MDXCreateElement"},2695:function(t,e,d){d.d(e,{Z:function(){return i}});var n=d(7462),a=d(3366),r=d(7294),l=["isBad","isGood","children","disableFullscreen","limitWidth"];function i(t){var e=t.isBad,d=t.isGood,i=t.children,o=t.disableFullscreen,s=t.limitWidth,c=(0,a.Z)(t,l),h=(0,r.useState)(!1),m=h[0],p=h[1];return r.createElement("div",{className:"preview-box-wrapper",style:s?{width:s,display:"table",margin:"0 auto"}:{}},!o&&r.createElement("button",{"aria-label":m?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(t){var e=t.target.closest(".preview-box-wrapper");m?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():e.requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen(),p(!m)}},m?r.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},r.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):r.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},r.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),e&&r.createElement("div",{className:"is-bad-example style-red"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},r.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),d&&r.createElement("div",{className:"is-good-example style-green"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},r.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),r.createElement("iframe",(0,n.Z)({width:"100%",className:"docus-preview-box"+(m?" is-fullscreen":""),srcDoc:i},c)))}},3159:function(t,e,d){d.r(e),d.d(e,{frontMatter:function(){return o},contentTitle:function(){return s},metadata:function(){return c},toc:function(){return h},default:function(){return p}});var n=d(7462),a=d(3366),r=(d(7294),d(3905)),l=d(2695),i=["components"],o={title:"Table"},s=void 0,c={unversionedId:"content/table",id:"content/table",isDocsHomePage:!1,title:"Table",description:"Tables allow web developers to arrange data into rows and columns, with FlatifyCSS you can have striped, bordered, and customized one vertical or horizontal.",source:"@site/docs/content/table.mdx",sourceDirName:"content",slug:"/content/table",permalink:"/docs/content/table",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/content/table.mdx",tags:[],version:"current",frontMatter:{title:"Table"},sidebar:"tutorialSidebar",previous:{title:"Separators",permalink:"/docs/content/separators"},next:{title:"Inputs",permalink:"/docs/forms/inputs"}},h=[{value:"Bordered",id:"bordered",children:[],level:3},{value:"Striped",id:"striped",children:[],level:3},{value:"Horizontal",id:"horizontal",children:[],level:3},{value:"Centered",id:"centered",children:[],level:3},{value:"Styling table items",id:"styling-table-items",children:[],level:3},{value:"Customization",id:"customization",children:[],level:3}],m={toc:h};function p(t){var e=t.components,d=(0,a.Z)(t,i);return(0,r.kt)("wrapper",(0,n.Z)({},m,d,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"Tables allow web developers to arrange data into rows and columns, with FlatifyCSS you can have striped, bordered, and customized one vertical or horizontal."),(0,r.kt)("h3",{id:"bordered"},"Bordered"),(0,r.kt)("p",null,"First, create a simple HTML table, then add the ",(0,r.kt)("inlineCode",{parentName:"p"},".bordered")," class to the table:"),(0,r.kt)(l.Z,{height:"360px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Table</title> </head> <body> <table class="bordered"> <caption> The list of students </caption> <thead> <tr> <th>Student</th> <th>Study time</th> <th>Homework</th> <th>Total grade</th> </tr> </thead> <tbody> <tr> <td>Alan</td> <td>6</td> <td>9/10</td> <td>95</td> </tr> <tr> <td>Carlos</td> <td>2</td> <td>7/10</td> <td>72</td> </tr> <tr> <td>Kim</td> <td>4</td> <td>7/10</td> <td>88</td> </tr> <tr> <td>Pat</td> <td>2</td> <td>4/10</td> <td>60</td> </tr> <tr> <td>Thomas</td> <td>5</td> <td>10/10</td> <td>98</td> </tr> </tbody> </table> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'{1} title="index.html"',"{1}":!0,title:'"index.html"'},'<table class="bordered">\n  <caption>\n    The list of students\n  </caption>\n  <thead>\n    <tr>\n      <th>Student</th>\n      <th>Study time</th>\n      <th>Homework</th>\n      <th>Total grade</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Alan</td>\n      <td>6</td>\n      <td>9/10</td>\n      <td>95</td>\n    </tr>\n    <tr>\n      <td>Carlos</td>\n      <td>2</td>\n      <td>7/10</td>\n      <td>72</td>\n    </tr>\n    <tr>\n      <td>Kim</td>\n      <td>4</td>\n      <td>7/10</td>\n      <td>88</td>\n    </tr>\n    <tr>\n      <td>Pat</td>\n      <td>2</td>\n      <td>4/10</td>\n      <td>60</td>\n    </tr>\n    <tr>\n      <td>Thomas</td>\n      <td>5</td>\n      <td>10/10</td>\n      <td>98</td>\n    </tr>\n  </tbody>\n</table>\n')),(0,r.kt)("h3",{id:"striped"},"Striped"),(0,r.kt)("p",null,"A striped table has ",(0,r.kt)("strong",{parentName:"p"},"different odd rows")," for helping readers to know which row they are looking at. To have a striped style add the ",(0,r.kt)("inlineCode",{parentName:"p"},".striped")," class to the table."),(0,r.kt)(l.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Table</title> </head> <body> <table class="striped"> <thead> <tr> <th>Student</th> <th>Study time</th> <th>Homework</th> <th>Total grade</th> </tr> </thead> <tbody> <tr> <td>Alan</td> <td>6</td> <td>9/10</td> <td>95</td> </tr> <tr> <td>Carlos</td> <td>2</td> <td>7/10</td> <td>72</td> </tr> <tr> <td>Kim</td> <td>4</td> <td>7/10</td> <td>88</td> </tr> <tr> <td>Pat</td> <td>2</td> <td>4/10</td> <td>60</td> </tr> <tr> <td>Thomas</td> <td>5</td> <td>10/10</td> <td>98</td> </tr> </tbody> </table> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'{1} title="index.html"',"{1}":!0,title:'"index.html"'},'<table class="striped">\n  ...\n</table>\n')),(0,r.kt)("h3",{id:"horizontal"},"Horizontal"),(0,r.kt)("p",null,"By default, tables are vertical however for small screens and other use cases, we might need to have a horizontal table, it is possible with adding the ",(0,r.kt)("inlineCode",{parentName:"p"}," horizontal")," class to the table:"),(0,r.kt)(l.Z,{height:"235px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Table</title> </head> <body> <table class="bordered horizontal"> <thead> <tr> <th>Student</th> <th>Study time</th> <th>Homework</th> <th>Total grade</th> </tr> </thead> <tbody> <tr> <td>Alan</td> <td>6</td> <td>9/10</td> <td>95</td> </tr> <tr> <td>Carlos</td> <td>2</td> <td>7/10</td> <td>72</td> </tr> <tr> <td>Kim</td> <td>4</td> <td>7/10</td> <td>88</td> </tr> <tr> <td>Pat</td> <td>2</td> <td>4/10</td> <td>60</td> </tr> <tr> <td>Thomas</td> <td>5</td> <td>10/10</td> <td>98</td> </tr> </tbody> </table> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'{1} title="index.html"',"{1}":!0,title:'"index.html"'},'<table class="bordered horizontal">\n  ...\n</table>\n')),(0,r.kt)("h3",{id:"centered"},"Centered"),(0,r.kt)("p",null,"By adding the ",(0,r.kt)("inlineCode",{parentName:"p"},".text-center")," class to the table, texts will be centered."),(0,r.kt)(l.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Table</title> </head> <body> <table class="striped text-centered"> <thead> <tr> <th>Student</th> <th>Study time</th> <th>Homework</th> <th>Total grade</th> </tr> </thead> <tbody> <tr> <td>Alan</td> <td>6</td> <td>9/10</td> <td>95</td> </tr> <tr> <td>Carlos</td> <td>2</td> <td>7/10</td> <td>72</td> </tr> <tr> <td>Kim</td> <td>4</td> <td>7/10</td> <td>88</td> </tr> <tr> <td>Pat</td> <td>2</td> <td>4/10</td> <td>60</td> </tr> <tr> <td>Thomas</td> <td>5</td> <td>10/10</td> <td>98</td> </tr> </tbody> </table> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'{1} title="index.html"',"{1}":!0,title:'"index.html"'},'<table class="striped text-centered">\n  ...\n</table>\n')),(0,r.kt)("h3",{id:"styling-table-items"},"Styling table items"),(0,r.kt)("p",null,"With helper classes we can have specific table items with various background and colors, ",(0,r.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"See here"),", is the list of helper classes. for styling elements based on CSS background and color properties. For example, lets show which student was better and who needs help:"),(0,r.kt)(l.Z,{height:"325px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Table</title> </head> <body> <table class="bordered striped"> <thead> <tr> <th>Student</th> <th>Study time</th> <th>Homework</th> <th>Total grade</th> </tr> </thead> <tbody> <tr> <td>Alan</td> <td>6</td> <td>9/10</td> <td>95</td> </tr> <tr> <td>Carlos</td> <td>2</td> <td>7/10</td> <td class="style-warning">72</td> </tr> <tr> <td>Kim</td> <td>4</td> <td>7/10</td> <td>88</td> </tr> <tr> <td>Pat</td> <td>2</td> <td>4/10</td> <td class="style-danger">60</td> </tr> <tr> <td>Thomas</td> <td>5</td> <td>10/10</td> <td class="style-success">98</td> </tr> </tbody> </table> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'{22,34,40} title="index.html"',"{22,34,40}":!0,title:'"index.html"'},'<table class="bordered horizontal">\n  <table class="bordered striped">\n    <thead>\n      <tr>\n        <th>Student</th>\n        <th>Study time</th>\n        <th>Homework</th>\n        <th>Total grade</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>Alan</td>\n        <td>6</td>\n        <td>9/10</td>\n        <td>95</td>\n      </tr>\n      <tr>\n        <td>Carlos</td>\n        <td>2</td>\n        <td>7/10</td>\n        <td class="style-warning">72</td>\n      </tr>\n      <tr>\n        <td>Kim</td>\n        <td>4</td>\n        <td>7/10</td>\n        <td>88</td>\n      </tr>\n      <tr>\n        <td>Pat</td>\n        <td>2</td>\n        <td>4/10</td>\n        <td class="style-danger">60</td>\n      </tr>\n      <tr>\n        <td>Thomas</td>\n        <td>5</td>\n        <td>10/10</td>\n        <td class="style-success">98</td>\n      </tr>\n    </tbody>\n  </table>\n</table>\n')),(0,r.kt)("h3",{id:"customization"},"Customization"),(0,r.kt)("p",null,'Each table can be customized individually or customized settings can be set as a wrapper for tables, this approach is done with custom CSS properties aka "variables".\nFlatifyCSS consider these CSS variables for table customization:'),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__table-border-color"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__table-bg-color"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__table-bg-color-dark"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__table-bg-color-darker"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__table-txt-color")),(0,r.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,r.kt)("div",{parentName:"div",className:"admonition-heading"},(0,r.kt)("h5",{parentName:"div"},(0,r.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,r.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,r.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"CSS variables prefix")),(0,r.kt)("div",{parentName:"div",className:"admonition-content"},(0,r.kt)("p",{parentName:"div"},"By default FlatifyCSS adds ",(0,r.kt)("inlineCode",{parentName:"p"},"flatify__")," prefix to CSS variables to prevent unwanted conflicts, If you change ",(0,r.kt)("inlineCode",{parentName:"p"},"$CSS_VAR_PFX")," in ",(0,r.kt)("inlineCode",{parentName:"p"},"_config.scss")," instead of ",(0,r.kt)("inlineCode",{parentName:"p"},"flatify__"),", variables will have your custom prefix: ",(0,r.kt)("inlineCode",{parentName:"p"},"--[your prefix]table-border-color"),"."))),(0,r.kt)("p",null,"Let's apply them in an example:"),(0,r.kt)(l.Z,{height:"325px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Table</title> <style> .my-table{ --flatify__table-border-color: #E0C341; --flatify__table-bg-color: #967ADC; --flatify__table-bg-color-dark: #6A50A7; --flatify__table-bg-color-darker: #4d3a79; --flatify__table-txt-color: #FFF; } </style> </head> <body> <table class="my-table bordered striped"> <thead> <tr> <th>Student</th> <th>Study time</th> <th>Homework</th> <th>Total grade</th> </tr> </thead> <tbody> <tr> <td>Alan</td> <td>6</td> <td>9/10</td> <td>95</td> </tr> <tr> <td>Carlos</td> <td>2</td> <td>7/10</td> <td>72</td> </tr> <tr> <td>Kim</td> <td>4</td> <td>7/10</td> <td>88</td> </tr> <tr> <td>Pat</td> <td>2</td> <td>4/10</td> <td>60</td> </tr> <tr> <td>Thomas</td> <td>5</td> <td>10/10</td> <td>98</td> </tr> </tbody> </table> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'{1} title="index.html"',"{1}":!0,title:'"index.html"'},'<table class="my-table bordered striped">\n  ...\n</table>\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".my-table {\n  --flatify__table-border-color: #e0c341;\n  --flatify__table-bg-color: #967adc;\n  --flatify__table-bg-color-dark: #6a50a7;\n  --flatify__table-bg-color-darker: #4d3a79;\n  --flatify__table-txt-color: #fff;\n}\n")))}p.isMDXComponent=!0}}]);