Table updates (#9743)

* Tried testing for broken tables, reverted that attempt
* Instead just allowed all tables horizontal scroll if needed with wrapper

Author: rosieyohannan

docs/contributors/modules/docs-style/pages/formatting.adoc

@@ -2,6 +2,8 @@
 :page-noindex: true
 :experimental:
 
+pass:[<!-- vale off -->]
+
 [#styling-text]
 == Styling text
 
@@ -94,3 +96,5 @@ This is a longer admonition with an ordered list:
 . Step 2
 . Step 3
 ****
+
+pass:[<!-- vale on -->]

docs/contributors/modules/docs-style/pages/headings.adoc

@@ -1,5 +1,6 @@
 = Headings
 
+pass:[<!-- vale off -->]
 * Write headings in a logical sequence. If you read section titles in order, the flow should present a good storyline for the doc.
 
 * Do not skip heading levels. For example, try not to jump from `h2` to `h4`, missing out `h3`.
@@ -21,3 +22,4 @@
 ** **Bad:** For more information, see the xref:guides:getting-started:hello-world.adoc["Hello world"] guide.
 
 * Do not use inline literal text in headings.
+pass:[<!-- vale on -->]

docs/contributors/modules/docs-style/pages/index.adoc

@@ -3,6 +3,8 @@
 :experimental:
 :page-layout: subsection
 
+pass:[<!-- vale off -->]
 This guide is a reference for contributors to CircleCI docs. Our style guide evolves so you will probably find older documentation does not meet the requirements set out here. Use this guide to help you write new docs, and when working on existing documentation it would be great if you can make edits to help keep everything consistent.
 
 For further information on markdown and AsciiDoc syntax refer to the https://github.github.com/gfm/[markdown documentation] and https://asciidoctor.org/docs/user-manual/[Asciidoctor User Guide].
+pass:[<!-- vale on -->]

docs/contributors/modules/docs-style/pages/links.adoc

@@ -1,5 +1,6 @@
 = Cross references and links
 
+pass:[<!-- vale off -->]
 This page covers how to create links and cross references in CircleCI docs.
 
 [#cross-references]
@@ -26,3 +27,4 @@ See the link:https://docs.antora.org/antora/latest/page/resource-id-coordinates/
 ----
 link:https://circleci.com[CircleCI]
 ----
+pass:[<!-- vale on -->]

docs/contributors/modules/docs-style/pages/style-and-voice.adoc

@@ -1,6 +1,7 @@
 = Style and voice
 :experimental:
 
+pass:[<!-- vale off -->]
 == Talk confidently and directly
 Use an active voice, talk directly to the reader using simple, direct, clear and confident language. Using active voice helps us to keep instructions as short as possible, and is, in most cases, the quickest way to convey meaning to the reader
 
@@ -18,6 +19,8 @@ Assume technical competence but explain concepts clearly and simply. Some concep
 * Avoid contractions, for example "don't", "you're". They make the content harder for non-native english speakers to read.
 * Do not use time-sentitive language like, "new" or "soon" or "in preview" in main prose. These can get missed when changes are needed. If this language is needed it should be in a banner (admonition) that is clearly there to indicate the time-sensitive nature of the content.
 
+[.table-scroll]
+--
 [cols=2*, options="header"]
 |===
 | Avoid
@@ -38,6 +41,7 @@ Assume technical competence but explain concepts clearly and simply. Some concep
 | Guys
 | Folks, y’all, people, humans, teammates
 |===
+--
 
 == Talking about CircleCI
 * The CircleCI is referred to as the "web app".
@@ -70,3 +74,4 @@ Assume technical competence but explain concepts clearly and simply. Some concep
 ** Read the setup guide …
 ** Set up your account …
 * **Do use** open source, **not** opensource, or open-source
+pass:[<!-- vale on -->]

docs/contributors/modules/docs-style/pages/using-code-samples.adoc

@@ -1,5 +1,6 @@
 = Using code samples
 
+pass:[<!-- vale off -->]
 * Provide code examples to help with clarity, and to help the reader reproduce the subject matter.
 
 * CircleCI config should always be tested as valid before adding it to docs.
@@ -52,4 +53,5 @@ workflows:
   my-workflow:
     jobs:
       - hello-job
-----
+----
+pass:[<!-- vale on -->]

docs/contributors/modules/docs-style/pages/using-images.adoc

@@ -2,6 +2,7 @@
 :page-description: Guidelines for using images in CircleCI documentation.
 :experimental:
 
+pass:[<!-- vale off -->]
 This page provides guidelines for using images in CircleCI documentation.
 
 == Guidelines for all images
@@ -109,4 +110,5 @@ sequenceDiagram
     participant Bob
     Alice->>Bob: Hello Bob, how are you?
     Bob-->>Alice: Great!
-....
+....
+pass:[<!-- vale on -->]

docs/contributors/modules/docs-style/pages/using-lists.adoc

@@ -1,5 +1,6 @@
 = Using lists
 
+pass:[<!-- vale off -->]
 * To generate numbered steps (an ordered list) use the following syntax:
 +
 [source,adoc]
@@ -28,3 +29,4 @@
 * Capitalize the first word of each item in a list.
 
 * If the text in the bullet is a full sentence or completes the intro stem use a period at the end.
+pass:[<!-- vale on -->]

docs/contributors/modules/docs-style/pages/using-tables.adoc

@@ -1,10 +1,14 @@
 = Using tables
 
+pass:[<!-- vale off -->]
 == Basic table syntax
 Use the following format for tables:
 
 [source,adoc]
 ----
+
+[.table-scroll]
+--
 [cols=4*, options="header"]
 |===
 | Key
@@ -17,10 +21,13 @@ Use the following format for tables:
 | String
 | Should currently be `2`
 |===
+--
 ----
 
 Looks like:
 
+[.table-scroll]
+--
 [cols=4*, options="header"]
 |===
 | Key
@@ -33,6 +40,7 @@ Looks like:
 | String
 | Should currently be `2`
 |===
+--
 
 == Extra wide tables
 
@@ -77,4 +85,5 @@ Looks like:
 
 == Advanced table options
 
-There are a lot of options for formatting tables, cell, rows, columns. For more information, see the link:https://docs.asciidoctor.org/asciidoc/latest/tables/build-a-basic-table/[Asciidoctor docs]
+There are a lot of options for formatting tables, cell, rows, columns. For more information, see the link:https://docs.asciidoctor.org/asciidoc/latest/tables/build-a-basic-table/[Asciidoctor docs]
+pass:[<!-- vale on -->]

docs/contributors/modules/templates/pages/template-conceptual.adoc

@@ -3,6 +3,7 @@
 :page-description: A short page description goes here max 155 characters.
 :experimental:
 
+pass:[<!-- vale off -->]
 ////
 :page-platform: drives the platform badges that you see in the info bar under the page title.
 :page-description: is used for SEO and meta description. This should be a short description of the page content. Between 70 and 155 characters.
@@ -69,6 +70,8 @@ Break up large blocks of text where possible to help make it easier to consume.
 
 This section shows how to create a table. This example has one heading row and one regular row. The table has three columns, and the third column is twice as wide as the first two columns. THe table has a title.
 
+[.table-scroll]
+--
 .This is a table
 [cols="1,1,2"]
 |===
@@ -78,6 +81,7 @@ This section shows how to create a table. This example has one heading row and o
 |Text for row 1 column 2
 |Text for row 1 column 3
 |===
+--
 
 For a full description of the options available, including merging cells, and cell formatting, see the link:https://docs.asciidoctor.org/asciidoc/latest/tables/build-a-basic-table/[Asciidoctor docs].
 
@@ -193,3 +197,4 @@ Place the answer here after the question.
 * xref:template-tutorial.adoc[Tutorial template]
 * xref:guides:about-circleci:benefits-of-circleci.adoc[Benefits of CircleCI]
 * xref:guides:about-circleci:concepts.adoc[CircleCI concepts]
+pass:[<!-- vale on -->]