improve style of table

Author: mydea

src/components/sdkOption.tsx renamed to src/components/sdkOption/index.tsx

@@ -2,8 +2,10 @@ import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
 import {serverContext} from 'sentry-docs/serverContext';
 import {PlatformCategory} from 'sentry-docs/types';
 
-import {PlatformCategorySection} from './platformCategorySection';
-import {PlatformSection} from './platformSection';
+import styles from './style.module.scss';
+
+import {PlatformCategorySection} from '../platformCategorySection';
+import {PlatformSection} from '../platformSection';
 
 type Props = {
   name: string;
@@ -53,7 +55,7 @@ export function SdkOption({
           </a>
         </h3>
 
-        <table className="w-auto">
+        <table className={styles['sdk-option-table']}>
           <tbody>
             {type && (
               <tr>

src/components/sdkOption/style.module.scss

@@ -0,0 +1,25 @@
+.sdk-option-table {
+  --border-radius: 6px;
+
+  width: auto !important;
+  border-collapse: separate !important;
+  border-spacing: 0px;
+  border-radius: var(--border-radius);
+  border-width: 1px;
+
+  & :first-child > :first-child {
+    border-top-left-radius: var(--border-radius);
+  }
+
+  & :first-child > :last-child {
+    border-top-right-radius: var(--border-radius);
+  }
+
+  & :last-child > :first-child {
+    border-bottom-left-radius: var(--border-radius);
+  }
+
+  & :last-child > :last-child {
+    border-bottom-right-radius: var(--border-radius);
+  }
+}