diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f9dc7f461..98810f649f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Layout of proxy settings ([#1502](https://github.com/scm-manager/scm-manager/pull/1502))
 - Apply test ids to production builds for usage in e2e tests ([#1499](https://github.com/scm-manager/scm-manager/pull/1499))
+- Refactor table component so that it can be styled by styled-components ([#1503](https://github.com/scm-manager/scm-manager/pull/1503))
 
 ### Fixed
 - Add explicit provider setup for bouncy castle ([#1500](https://github.com/scm-manager/scm-manager/pull/1500))
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 3e8837a6f3..88a9c3e5c6 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -63222,7 +63222,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
 
 exports[`Storyshots Table|Table Default 1`] = `
 <table
-  className="Table__StyledTable-sc-1bx231g-0 table content is-hoverable"
+  className="table content is-hoverable"
 >
   <thead>
     <tr>
@@ -63311,9 +63311,60 @@ exports[`Storyshots Table|Table Empty 1`] = `
 </div>
 `;
 
+exports[`Storyshots Table|Table Table with Word-Break 1`] = `
+<table
+  className="table content is-hoverable Tablestories__StyledTable-vgb14n-0 hmfYbF"
+>
+  <thead>
+    <tr>
+      <th
+        className="has-cursor-pointer"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        Id
+        <i
+          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 cBnwYo"
+        />
+      </th>
+      <th
+        className="has-cursor-pointer"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        Name
+        <i
+          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 cBnwYo"
+        />
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        42
+      </td>
+      <td>
+        herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp
+      </td>
+    </tr>
+    <tr>
+      <td>
+        17
+      </td>
+      <td>
+        herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
 exports[`Storyshots Table|Table TextColumn 1`] = `
 <table
-  className="Table__StyledTable-sc-1bx231g-0 table content is-hoverable"
+  className="table content is-hoverable"
 >
   <thead>
     <tr>
diff --git a/scm-ui/ui-components/src/table/Table.stories.tsx b/scm-ui/ui-components/src/table/Table.stories.tsx
index eebaf9bc57..66c62e9c8a 100644
--- a/scm-ui/ui-components/src/table/Table.stories.tsx
+++ b/scm-ui/ui-components/src/table/Table.stories.tsx
@@ -26,6 +26,17 @@ import { storiesOf } from "@storybook/react";
 import Table from "./Table";
 import Column from "./Column";
 import TextColumn from "./TextColumn";
+import styled from "styled-components";
+
+const StyledTable = styled(Table)`
+  width: 400px;
+  border: 1px dashed black;
+  padding: 4px;
+  margin: 4px;
+  td {
+    word-break: break-word;
+  }
+`;
 
 storiesOf("Table|Table", module)
   .add("Default", () => (
@@ -73,4 +84,22 @@ storiesOf("Table|Table", module)
       <TextColumn header="Id" dataKey="id" />
       <TextColumn header="Name" dataKey="name" />
     </Table>
+  ))
+  .add("Table with Word-Break", () => (
+    <StyledTable
+      data={[
+        {
+          id: "42",
+          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp"
+        },
+        {
+          id: "17",
+          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp"
+        }
+      ]}
+      emptyMessage="No data found."
+    >
+      <TextColumn header="Id" dataKey="id" />
+      <TextColumn header="Name" dataKey="name" />
+    </StyledTable>
   ));
diff --git a/scm-ui/ui-components/src/table/Table.tsx b/scm-ui/ui-components/src/table/Table.tsx
index 1017f15f14..ac1c675a27 100644
--- a/scm-ui/ui-components/src/table/Table.tsx
+++ b/scm-ui/ui-components/src/table/Table.tsx
@@ -22,23 +22,20 @@
  * SOFTWARE.
  */
 import React, { FC, ReactElement, useEffect, useState } from "react";
-import styled from "styled-components";
 import { Comparator } from "./types";
 import SortIcon from "./SortIcon";
 import Notification from "../Notification";
-
-const StyledTable = styled.table.attrs(() => ({
-  className: "table content is-hoverable"
-}))``;
+import classNames from "classnames";
 
 type Props = {
   data: any[];
   sortable?: boolean;
   emptyMessage?: string;
   children: Array<ReactElement>;
+  className?: string;
 };
 
-const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
+const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className }) => {
   const [tableData, setTableData] = useState(data);
   useEffect(() => {
     setTableData(data);
@@ -107,7 +104,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
   }
 
   return (
-    <StyledTable>
+    <table className={classNames("table content is-hoverable", className)}>
       <thead>
         <tr>
           {React.Children.map(children, (child, index) => (
@@ -125,7 +122,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
         </tr>
       </thead>
       <tbody>{tableData.map(mapDataToColumns)}</tbody>
-    </StyledTable>
+    </table>
   );
 };