Reconfigure table sizing #134

ptgott · 2025-02-25T14:45:21Z

Docs pages often include multiple tables with the same headings. For examples, see the following pages:

/faq
/admin-guides/access-controls/compliance-frameworks/fedramp/

With the current CSS, it is difficult for a reader to follow multiple instances of the same table from the top of a page to the bottom, since the columns in each instance have different widths. Since the docs engine's Markdown parser renders Markdown tables as rows and cells, instead of columns, we need to edit table cell sizing instead of column sizing.

Edit the styling for tables so that columns are aligned between multiple tables. Use the fixed table-layout property, with a fixed width for tables and cells based on a reasonable viewport width. Also set table cell width manually so the browser doesn't set this separately for each table. Use different width values for tables with three or more cells in each row and tables with fewer than three cells in each row.

To prevent the fixed-sized tables from scaling a page down on mobile, set the overflow-x property of article to scroll.

Docs pages often include multiple tables with the same headings. For examples, see the following pages: - `/faq` - `/admin-guides/access-controls/compliance-frameworks/fedramp/` With the current CSS, it is difficult for a reader to follow multiple instances of the same table from the top of a page to the bottom, since the columns in each instance have different widths. Since the docs engine's Markdown parser renders Markdown tables as rows and cells, instead of columns, we need to edit table cell sizing instead of column sizing. Edit the styling for tables so that columns are aligned between multiple tables. Use the `fixed` `table-layout` property, with a fixed width for tables and cells based on a reasonable viewport width. Also set table cell width manually so the browser doesn't set this separately for each table. Use different width values for tables with three or more cells in each row and tables with fewer than three cells in each row. To prevent the fixed-sized tables from scaling a page down on mobile, set the `overflow-x` property of `article` to `scroll`.

github-actions · 2025-02-25T14:46:14Z

Amplify deployment status

Branch	Commit	Job ID	Status	Preview	Updated (UTC)
paul.gottschling/2025-02-21-table	`e6ba6b3`	3	✅SUCCEED	paul-gottschling-2025-02-21-table	2025-02-25 14:56:04

roraback · 2025-02-26T15:15:07Z

src/styles/global.css

+}
+
+table:has(td:nth-of-type(3)) td {
+  width: 150px;


What do you think of doing 25% width, with a flexible table width (instead of fixed/max-width on lines 55 and 56)?

Also, it could aid in legibility to make 2nd-4th columns center-aligned (with first column still left-aligned)

That works for me! A 25% width would (as far as I understand it) behave as expected for four-column tables, so we could define separate table:has blocks for different column sizes, each with a different percentage, if that makes sense.

It looks like the widest table in the docs has six columns, the one in this section, which only has a single row. There are a few tables with five columns, etc., this section.

I think that for most tables, flexible column widths are probably good. This page is the only one I know of where the tables are all related, and so it makes sense to standardize column widths so they align across the tables. If it's easy to apply a class to all of these tables, you could do it that way, too.

👍 We could define a class that applies this style. In terms of implementing the style for just the tables in the feature matrix, it's not possible to apply a style to a table using Markdown table syntax (the way the tables are currently defined). Instead, we could either:

Use raw HTML for the table, adding the class to that

Wrap the Markdown table in a <div> with the class

My personal vote would be to wrap the Markdown table in a div, which avoids the distracting HTML table tags, and would be quick to execute. What do you think?

wrapping it in a div sounds like the less complex way to me as well, but I don't have strong opinions on implementation details as long as the resulting UX is good. Thanks!

Make it easier for a user to follow a single column across multiple tables of the feature matrix. Since the style sets cells to 25% width, which assumes a table that is four cells wide, use a `style` tag so the style only applies to the tables in the `teleport-editions.mdx` guide. Closes gravitational/docs-website#134

* Reorganize the feature matrix This change organizes the feature matrix according to the latest product categorization scheme, and moves the feature matrix into its own guide to make it more discoverable. While there is opportunity to rework the rows within the feature matrix, this change minimizes the scope of the first iteration by reorganizing the existing rows while leaving them for the most part unchanged. In the new feature matrix page, each Teleport product has its own H2-level section. Product descriptions come from official Marketing language, focusing on concrete statements about what each product comprises and how it works and leaving out statements of value (which are not typically found in documentation). This change does not include sections for categories with no rows in the current table. * Respond to zmb3 feedback Add minor wording tweaks. * Align cells across feature matrix tables Make it easier for a user to follow a single column across multiple tables of the feature matrix. Since the style sets cells to 25% width, which assumes a table that is four cells wide, use a `style` tag so the style only applies to the tables in the `teleport-editions.mdx` guide. Closes gravitational/docs-website#134 * Update the MWI section of the feature matrix Indicate that it is available for Community Edition users. * Edit index.mdx Apply changes made to identical language in teleport-editions.mdx. * Respond to eglenn-teleport feedback - Move the Community Edition column to the final place, rather than the first, since we now want to de-emphasize Community Edition and elevate the commercial offering. - Edit the text to de-emphemphasize "editions", moving the description of editions to the end of the page and linking to this from the heading of relevant feature matrix columns. - Remove section intro paragraphs, since the same information is on the home page of the docs. * Add a Teleport Identity Security section Co-authored-by: Ben Arent <ben@goteleport.com> * Rename MWI features --------- Co-authored-by: Ben Arent <ben@goteleport.com>

Make it easier for a user to follow a single column across multiple tables of the feature matrix. Since the style sets cells to 25% width, which assumes a table that is four cells wide, use a `style` tag so the style only applies to the tables in the `teleport-editions.mdx` guide. Closes gravitational/docs-website#134

Backports #52641 * Reorganize the feature matrix This change organizes the feature matrix according to the latest product categorization scheme, and moves the feature matrix into its own guide to make it more discoverable. While there is opportunity to rework the rows within the feature matrix, this change minimizes the scope of the first iteration by reorganizing the existing rows while leaving them for the most part unchanged. In the new feature matrix page, each Teleport product has its own H2-level section. Product descriptions come from official Marketing language, focusing on concrete statements about what each product comprises and how it works and leaving out statements of value (which are not typically found in documentation). This change does not include sections for categories with no rows in the current table. * Respond to zmb3 feedback Add minor wording tweaks. * Align cells across feature matrix tables Make it easier for a user to follow a single column across multiple tables of the feature matrix. Since the style sets cells to 25% width, which assumes a table that is four cells wide, use a `style` tag so the style only applies to the tables in the `teleport-editions.mdx` guide. Closes gravitational/docs-website#134 * Update the MWI section of the feature matrix Indicate that it is available for Community Edition users. * Edit index.mdx Apply changes made to identical language in teleport-editions.mdx. * Respond to eglenn-teleport feedback - Move the Community Edition column to the final place, rather than the first, since we now want to de-emphasize Community Edition and elevate the commercial offering. - Edit the text to de-emphemphasize "editions", moving the description of editions to the end of the page and linking to this from the heading of relevant feature matrix columns. - Remove section intro paragraphs, since the same information is on the home page of the docs. * Add a Teleport Identity Security section Co-authored-by: Ben Arent <ben@goteleport.com> * Rename MWI features --------- Co-authored-by: Ben Arent <ben@goteleport.com>

Backports #52641 * Reorganize the feature matrix This change organizes the feature matrix according to the latest product categorization scheme, and moves the feature matrix into its own guide to make it more discoverable. While there is opportunity to rework the rows within the feature matrix, this change minimizes the scope of the first iteration by reorganizing the existing rows while leaving them for the most part unchanged. In the new feature matrix page, each Teleport product has its own H2-level section. Product descriptions come from official Marketing language, focusing on concrete statements about what each product comprises and how it works and leaving out statements of value (which are not typically found in documentation). This change does not include sections for categories with no rows in the current table. * Respond to zmb3 feedback Add minor wording tweaks. * Align cells across feature matrix tables Make it easier for a user to follow a single column across multiple tables of the feature matrix. Since the style sets cells to 25% width, which assumes a table that is four cells wide, use a `style` tag so the style only applies to the tables in the `teleport-editions.mdx` guide. Closes gravitational/docs-website#134 * Update the MWI section of the feature matrix Indicate that it is available for Community Edition users. * Edit index.mdx Apply changes made to identical language in teleport-editions.mdx. * Respond to eglenn-teleport feedback - Move the Community Edition column to the final place, rather than the first, since we now want to de-emphasize Community Edition and elevate the commercial offering. - Edit the text to de-emphemphasize "editions", moving the description of editions to the end of the page and linking to this from the heading of relevant feature matrix columns. - Remove section intro paragraphs, since the same information is on the home page of the docs. * Add a Teleport Identity Security section * Rename MWI features --------- Co-authored-by: Ben Arent <ben@goteleport.com>

ptgott temporarily deployed to docs-amplify February 25, 2025 14:45 — with GitHub Actions Inactive

ptgott requested a review from roraback February 25, 2025 14:45

roraback reviewed Feb 26, 2025

View reviewed changes

ptgott requested a review from roraback February 26, 2025 22:00

ptgott mentioned this pull request Mar 18, 2025

[v17] Reorganize the feature matrix gravitational/teleport#53167

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reconfigure table sizing #134

Reconfigure table sizing #134

ptgott commented Feb 25, 2025

github-actions bot commented Feb 25, 2025 •

edited

Loading

roraback Feb 26, 2025 •

edited

Loading

ptgott Feb 26, 2025

roraback Feb 27, 2025

ptgott Feb 27, 2025

roraback Feb 27, 2025

Reconfigure table sizing #134

Are you sure you want to change the base?

Reconfigure table sizing #134

Conversation

ptgott commented Feb 25, 2025

github-actions bot commented Feb 25, 2025 • edited Loading

roraback Feb 26, 2025 • edited Loading

Choose a reason for hiding this comment

ptgott Feb 26, 2025

Choose a reason for hiding this comment

roraback Feb 27, 2025

Choose a reason for hiding this comment

ptgott Feb 27, 2025

Choose a reason for hiding this comment

roraback Feb 27, 2025

Choose a reason for hiding this comment

github-actions bot commented Feb 25, 2025 •

edited

Loading

roraback Feb 26, 2025 •

edited

Loading