diff --git a/src/content/docs/content/rafiki.mdx b/src/content/docs/content/rafiki.mdx index 756ac2d..2305980 100644 --- a/src/content/docs/content/rafiki.mdx +++ b/src/content/docs/content/rafiki.mdx @@ -24,4 +24,59 @@ pnpm install cd packages/documentation pnpm start ``` - \ No newline at end of file + + +## Custom table styles + +We've implemented a few different custom table styles specifically for Rafiki docs. These custom styles were developed because we were running into scrolling issues as well as column width issues, primarily when text was formatted as code. + +You can wrap your markdown table in an HTML `
` with one of the following custom table styles: + +### overflow-table + +A long and wide table (vertical and horizontal scrollbars on overflow) with **regular column sizing**. + +```html +
+ +| Column Header 1 | Column Header 2 | Column Header 3 | +| --------------- | --------------- | --------------- | +| Content | Content | Content | +| Content | Content | Content | + +
+``` + +### overflow-table wide-column + +A long and wide table (vertical and horizontal scrollbars on overflow) that needs extra wide columns to accommodate text formatted as code. + +`wide-column` sets the minimum width of the table (sum of the total width of all columns) to **60rem**. + +```html +
+ +| Column Header 1 | Column Header 2 | Column Header 3 | +| --------------- | --------------- | --------------- | +| Content | Content | Content | +| Content | Content | Content | + +
+``` + +### overflow-table wider-column + +A long and wide table (vertical and horizontal scrollbars on overflow) that needs even larger, extra wide columns to accommodate text formatted as code. + +`wider-column` sets the minimum width of the table (sum of the total width of all columns) to **80rem**. + +```html +
+ +| Column Header 1 | Column Header 2 | Column Header 3 | +| --------------- | --------------- | --------------- | +| Content | Content | Content | +| Content | Content | Content | + +
+``` \ No newline at end of file