fix(table): only apply border to immediate td children (#7911)

* fix(table): only apply border to immediate `td` children

Signed-off-by: Aviv Keller <me@aviv.sh>

* story

* use old name

---------

Signed-off-by: Aviv Keller <me@aviv.sh>

Author: avivkeller

packages/ui-components/__design__/table.stories.tsx

@@ -25,24 +25,28 @@ export const Table: StoryObj = {
               ))}
             </tr>
           ))}
-        </tbody>
-      </table>
-    </main>
-  ),
-};
-
-export const HeadlessTable: StoryObj = {
-  render: () => (
-    <main>
-      <table>
-        <tbody>
-          {tableData.map((row, rowIndex) => (
-            <tr key={rowIndex}>
-              {row.map((cell, cellIndex) => (
-                <td key={cellIndex}>{cell}</td>
-              ))}
-            </tr>
-          ))}
+          <tr>
+            <td colSpan={3}>
+              <table>
+                <thead>
+                  <tr>
+                    <th>Sub 1</th>
+                    <th>Sub 2</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Sub A</td>
+                    <td>Sub B</td>
+                  </tr>
+                  <tr>
+                    <td>Sub C</td>
+                    <td>Sub D</td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
         </tbody>
       </table>
     </main>

packages/ui-components/styles/markdown.css

@@ -157,7 +157,7 @@ main {
       @apply font-semibold;
     }
 
-    tr:last-child td {
+    tr:last-child > td {
       @apply sm:border-b-0;
 
       &:last-child {