I am using Radix UI Themes (https://www.radix-ui.com/themes/docs/overview/getting-started) in my React JS App.
I have created a table, and inside this table's cell I display some other elements. My goal is to make these elements take the full height of the cell they are rendered in.
This is what I have now:
My goal is to have each Card element rendered within each table cell to take its full height, so that all elements in one row render with the same height.
Here is the code I used to render what I have now:
import React from "react";
import { Card, Table } from "@radix-ui/themes";
function App() {
return (
<>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Column 1</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Column 2</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Column 3</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Card>
Test <br />
Test <br />
Test <br />
Test <br />
</Card>
</Table.Cell>
<Table.Cell>
<Card>
Test <br />
</Card>
</Table.Cell>
<Table.Cell>
<Card>
Test <br />
Test <br />
</Card>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</>
);
}
export default App;
That App is a part of the vite created react js app:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "@radix-ui/themes/styles.css";
import { Theme, ThemePanel } from "@radix-ui/themes";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Theme>
<App />
</Theme>
</React.StrictMode>
);
I have found a question that deals with the same problematic: How to make <div> fill <td> height , but I could not make my code to work with the hack provided there.
And even if the hack with min-width would work I would prefer a solution using css syntax from the Radix-UI Themes e.g. using something like align = 'stretch'.
I would be grateful if someone can provide me with a hint or a way on how to get all my cards to have the same height.
