diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
new file mode 100644
index 0000000..ba2cfd0
--- /dev/null
+++ b/src/components/table/_table.scss
@@ -0,0 +1,221 @@
+/* ===============Table================== */
+.cmp-adaptiveform-table {
+ color: $dark-gray;
+ font-size: $font-md;
+ margin: 1rem 0;
+}
+
+.cmp-adaptiveform-table__title {
+ font-size: $font-lg;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+}
+
+.cmp-adaptiveform-table__help-container {
+ display: flex;
+ flex-direction: row-reverse;
+}
+
+.cmp-adaptiveform-table__questionmark {
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ border-radius: 9px;
+ background: url(./resources/images/question.svg) center center / cover no-repeat, $light-gray;
+ cursor: pointer;
+ position: absolute;
+ right: 20px;
+}
+
+.cmp-adaptiveform-table__help-container .cmp-adaptiveform-table__questionmark {
+ position: unset;
+ right: unset;
+}
+
+.cmp-adaptiveform-table__shortdescription {
+ font-size: $font-sm;
+ margin-top: $error-top-margin;
+}
+
+.cmp-adaptiveform-table__longdescription {
+ color: $dark-gray;
+ background-color: $very-light-gray;
+ font-size: $font-sm;
+ margin-top: $error-top-margin;
+ margin-bottom: 5px;
+ padding: 10px;
+
+ p {
+ margin: 0;
+ padding: 0;
+ }
+}
+
+.cmp-adaptiveform-table__widget {
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+ border: 1px solid $silver;
+}
+
+.cmp-adaptiveform-table__head {
+ display: table-header-group;
+}
+
+.cmp-adaptiveform-table__body {
+ display: table-row-group;
+}
+
+/* ===============Table Header================== */
+.cmp-adaptiveform-tableheader {
+ display: table-row;
+}
+
+.cmp-adaptiveform-tablehead {
+ display: table-cell;
+ padding: 0.75rem;
+ border: 1px solid $silver;
+ text-align: left;
+ vertical-align: top;
+ background-color: $panel-bg-color;
+ font-weight: 600;
+}
+
+.cmp-adaptiveform-table__head .cmp-adaptiveform-tableheader:hover > .cmp-adaptiveform-tablehead {
+ background-color: $very-light-gray;
+}
+
+.cmp-adaptiveform-table__head .cmp-adaptiveform-tableheader > .cmp-adaptiveform-tablehead:hover {
+ filter: brightness(0.95);
+}
+
+/* ===============Table Row & Cell================== */
+.cmp-adaptiveform-tablerow {
+ display: table-row;
+}
+
+.cmp-adaptiveform-tablecell {
+ display: table-cell;
+ padding: 0.75rem;
+ border: 1px solid $silver;
+ text-align: left;
+ vertical-align: top;
+}
+
+.cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow:hover > .cmp-adaptiveform-tablecell {
+ background-color: $wizard-bg-color;
+}
+
+.cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow > .cmp-adaptiveform-tablecell:hover {
+ background-color: $very-light-gray;
+}
+
+/* ===============Table Row Controls (repeatable)================== */
+.cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ gap: 0.5rem 0.75rem;
+ border: 1px solid $silver;
+ margin: -1px;
+}
+
+.cmp-adaptiveform-tablecell--with-row-controls > div:first-of-type {
+ flex: 1 1 auto;
+ min-width: 0;
+}
+
+.cmp-adaptiveform-tablerow__runtime-controls {
+ display: inline-flex;
+ flex: 0 0 auto;
+ align-items: center;
+ align-self: center;
+ gap: 0.25rem;
+}
+
+.cmp-adaptiveform-tablerow__add-button,
+.cmp-adaptiveform-tablerow__remove-button {
+ width: 1.5rem;
+ height: 1.5rem;
+ padding: 0;
+ border: none;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 1.25rem 1.25rem;
+ cursor: pointer;
+
+ &:focus-visible {
+ outline: 2px solid $focus-ring-color;
+ outline-offset: 2px;
+ }
+
+ &[data-cmp-visible="false"] {
+ display: none;
+ }
+}
+
+.cmp-adaptiveform-tablerow__add-button {
+ background-image: url(./resources/images/add-button.svg);
+}
+
+.cmp-adaptiveform-tablerow__remove-button {
+ background-image: url(./resources/images/remove-button.svg);
+}
+
+/* ===============Column Sorting================== */
+.cmp-adaptiveform-table__sort-header-inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.5rem;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.cmp-adaptiveform-table__sort-button {
+ flex-shrink: 0;
+ width: 2rem;
+ height: 2rem;
+ padding: 0;
+ margin: 0;
+ border: 1px solid $silver;
+ border-radius: 2px;
+ background-color: $white;
+ background-image: url(./resources/images/sort-neutral.svg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 18px 18px;
+ cursor: pointer;
+
+ &:hover,
+ &:focus-visible {
+ background-color: $very-light-gray;
+ outline: 2px solid $focus-ring-color;
+ outline-offset: 1px;
+ }
+
+ &.cmp-adaptiveform-table__sort-button--asc {
+ background-image: url(./resources/images/sort-asc.svg);
+ }
+
+ &.cmp-adaptiveform-table__sort-button--desc {
+ background-image: url(./resources/images/sort-desc.svg);
+ }
+}
+
+.cell-wrapper {
+ width: 80%;
+}
+
+/* ===============Responsive================== */
+@media (max-width: 768px) {
+ .cmp-adaptiveform-table__widget {
+ font-size: $font-sm;
+ }
+
+ .cmp-adaptiveform-tablecell,
+ .cmp-adaptiveform-tablehead {
+ padding: 0.5rem;
+ }
+}
diff --git a/src/resources/images/sort-asc.svg b/src/resources/images/sort-asc.svg
new file mode 100644
index 0000000..7eea7bb
--- /dev/null
+++ b/src/resources/images/sort-asc.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/resources/images/sort-desc.svg b/src/resources/images/sort-desc.svg
new file mode 100644
index 0000000..f484cc7
--- /dev/null
+++ b/src/resources/images/sort-desc.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/resources/images/sort-neutral.svg b/src/resources/images/sort-neutral.svg
new file mode 100644
index 0000000..ffbaae5
--- /dev/null
+++ b/src/resources/images/sort-neutral.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/theme.scss b/src/theme.scss
index 3f94c08..cde1c81 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -45,3 +45,4 @@
@import './components/scribble/_scribble.scss';
@import './components/datetime/_datetime.scss';
@import './components/imagechoice/_imagechoice.scss';
+@import './components/table/_table.scss';