diff --git a/Components/Tables/Bending-Sheet-Table/index.html b/Components/Tables/Bending-Sheet-Table/index.html
new file mode 100644
index 00000000..3d5f619b
--- /dev/null
+++ b/Components/Tables/Bending-Sheet-Table/index.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+ Bending Sheet Table
+
+
+
+
+ Bending Sheet Table
+
+
+ | One |
+ Two |
+ Three |
+
+
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+ | Cell 1 |
+ Cell 2 |
+ Cell 3 |
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Tables/Bending-Sheet-Table/style.css b/Components/Tables/Bending-Sheet-Table/style.css
new file mode 100644
index 00000000..a4bab905
--- /dev/null
+++ b/Components/Tables/Bending-Sheet-Table/style.css
@@ -0,0 +1,110 @@
+* {
+ box-sizing: border-box;
+ font: 300 1.125rem/1.5 system-ui;
+}
+
+body {
+ padding: 2rem;
+}
+
+caption {
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+}
+
+table {
+ border-collapse: collapse;
+ border-radius: 1rem;
+ overflow: hidden;
+ width: min(48rem, 100%);
+ filter: drop-shadow(0 5px 15px #c1c1c1);
+ margin-inline: auto;
+}
+
+thead {
+ background: royalblue;
+ color: white;
+ border-radius: 1rem;
+
+ th {
+ font-weight: bold;
+ padding-block: 0.5rem;
+ }
+
+ @media (width <=32rem) {
+ display: none;
+ }
+}
+
+tr {
+ position: relative;
+ filter: drop-shadow(4px 4px 6px silver);
+ z-index: var(--zi);
+
+ &:not(:first-child)::after {
+ content: "";
+ position: absolute;
+ right: 0;
+ top: -2rem;
+ width: 2rem;
+ height: 2rem;
+ background-color: var(--row-background);
+ transition: background 200ms;
+ }
+
+ @media (width <=32rem) {
+ display: flex;
+ flex-direction: column;
+ }
+}
+
+tr:nth-child(4n + 1) {
+ --row-background: honeydew;
+}
+
+tr:nth-child(4n + 2) {
+ --row-background: lavenderblush;
+}
+
+tr:nth-child(4n + 3) {
+ --row-background: aliceblue;
+}
+
+tr:nth-child(4n) {
+ --row-background: lightcyan;
+}
+
+tr:hover {
+ --row-background: papayawhip;
+}
+
+td {
+ padding: 2rem 0.5rem;
+ background-color: var(--row-background);
+ transition: background 200ms;
+
+ &:last-child {
+ clip-path: polygon(0 0,
+ 100% 0,
+ 100% calc(100% - 2rem),
+ calc(100% - 2rem) 100%,
+ 0 101%);
+
+ &::after {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ content: "";
+ border: 1rem solid color-mix(in srgb, var(--row-background, #c0c0c0), black 10%);
+ }
+ }
+
+ @media (width < 32rem) {
+ padding: 0.25rem 0.5rem;
+
+ &::before {
+ content: attr(data-title) ": ";
+ font-weight: bold;
+ }
+ }
+}
\ No newline at end of file
diff --git a/Components/Tables/Pop-Up-Table/index.html b/Components/Tables/Pop-Up-Table/index.html
new file mode 100644
index 00000000..2a51d41e
--- /dev/null
+++ b/Components/Tables/Pop-Up-Table/index.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+ Pop Up Table
+
+
+
+
+
+
+
+ Sites
+ |
+
+ Views
+ |
+
+ Clicks
+ |
+
+ Averages
+ |
+
+
+ | Google |
+ 9518 |
+ 6369 |
+ 01:32:50 |
+
+
+ | Twitter |
+ 7326 |
+ 10437 |
+ 00:51:22 |
+
+
+ | Amazon |
+ 4162 |
+ 5327 |
+ 00:24:34 |
+
+
+ | Linedlin |
+ 3654 |
+ 2961 |
+ 00:12:10 |
+
+
+ | Codepen |
+ 4623 |
+ 4135 |
+ 00:46:19 |
+
+
+ | GitHub |
+ 2002 |
+ 3486 |
+ 00:31:52 |
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Tables/Pop-Up-Table/style.css b/Components/Tables/Pop-Up-Table/style.css
new file mode 100644
index 00000000..25387465
--- /dev/null
+++ b/Components/Tables/Pop-Up-Table/style.css
@@ -0,0 +1,108 @@
+body {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 300;
+ line-height: 1.42em;
+ color: #A7A1AE;
+ background: #1F2739;
+}
+
+h1 {
+ font-size: 3em;
+ font-weight: 300;
+ text-align: center;
+ display: block;
+ line-height: 1em;
+ padding-bottom: 2em;
+ color: #FB667A;
+}
+
+h2 a {
+ font-weight: 700;
+ text-transform: uppercase;
+ color: #FB667A;
+ text-decoration: none;
+}
+
+.blue {
+ color: #185875;
+}
+
+.yellow {
+ color: #FfF842;
+}
+
+.container th h1 {
+ font-weight: bold;
+ font-size: 1em;
+ text-align: left;
+ color: #a7a194;
+}
+
+.container td {
+ font-weight: normal;
+ font-size: 1em;
+ -webkit-box-shadow: 0 2px 2px-2px #0E1119;
+ -moz-box-shadow: 0 2px 2px -2px #0E1119;
+ box-shadow: 0 2px 2px -2px #0E1119;
+}
+
+.container {
+ text-align: left;
+ overflow: hidden;
+ width: 80%;
+ margin: 0 auto;
+ display: table;
+ padding: 0 0 8em 0;
+}
+
+.container td,
+.container th {
+ padding-bottom: 2%;
+ padding-top: 2%;
+ padding-left: 2%;
+
+}
+
+.container tr:nth-child(odd) {
+ background-color: #323C50;
+
+}
+
+.container tr:nth-child(even) {
+ background-color: #2C3446;
+}
+
+.container th {
+ background-color: #1F2739;
+
+}
+
+.container td:first-child {
+ color: #FB667A;
+}
+
+.container tr:hover {
+ background-color: #464A52;
+ -webkit-box-shadow: 0 6px 6px -6px #0E1119;
+ -moz-box-shadow: 0 6px 6px -6px #0E1119;
+ box-shadow: 0 6px 6px -6px #0E1119;
+}
+
+.container td:hover {
+ background-color: #FFF842;
+ color: #403E10;
+ font-weight: bold;
+ transform: translate3d(6px, -6px, 0);
+ transition-delay: 0s;
+ transition-duration: 0.4s;
+ transition-property: all;
+ transition-timing-function: line;
+ box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
+}
+
+@media(max-width: 800px) {
+ .container td:nth-child(4),
+ .container th:nth-child(4) {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/assets/json_files/tables.json b/assets/json_files/tables.json
index 871b03fb..a31c76c4 100644
--- a/assets/json_files/tables.json
+++ b/assets/json_files/tables.json
@@ -1,4 +1,9 @@
[
+ {
+ "title": "Bending Sheet Table",
+ "previewLink": "../../Components/Tables/Bending-Sheet-Table/index.html",
+ "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Tables/Bending-Sheet-Table"
+ },
{
"title": "Expandable Row Table",
"previewLink": "../../Components/Tables/Expandable-Row-Table/index.html",
@@ -8,5 +13,10 @@
"title": "Interactive Flip Table",
"previewLink": "../../Components/Tables/Interactive-Flip-Table/index.html",
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Tables/Interactive-Flip-Table"
+ },
+ {
+ "title": "Pop Up Table",
+ "previewLink": "../../Components/Tables/Pop-Up-Table/index.html",
+ "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Tables/Pop-Up-Table"
}
]
\ No newline at end of file