Merge branch 'docs-fix-table' into 'master'

Docs: fix table on ci/variables

Closes gitlab-com/gitlab-docs#323

See merge request gitlab-org/gitlab-ce!24632

2 files changed, 37 insertions, 0 deletions

diff --git a/doc/ci/variables/README.md b/doc/ci/variables/README.md
index 25d189afb24..466c5ee5914 100644
--- a/doc/ci/variables/README.md
+++ b/doc/ci/variables/README.md
@@ -1,3 +1,7 @@
+---
+table_display_block: true
+---
+
 # GitLab CI/CD Variables
 
 When receiving a job from GitLab CI, the [Runner] prepares the build environment.
diff --git a/doc/development/documentation/styleguide.md b/doc/development/documentation/styleguide.md
index c188819560e..cda66447c2c 100644
--- a/doc/development/documentation/styleguide.md
+++ b/doc/development/documentation/styleguide.md
@@ -95,6 +95,20 @@ yield a useful result, and ensuring content is helpful and easy to consume.
     - List item 2
     ```
 
+### Tables overlapping the ToC
+
+By default, all tables have a width of 100% on docs.gitlab.com.
+In a few cases, the table will overlap the table of contents (ToC).
+For these cases, add an entry to the document's frontmatter to
+render them displaying block. This will make sure the table
+is displayed behind the ToC, scrolling horizontally:
+
+```md
+---
+table_display_block: true
+---
+```
+
 ## Emphasis
 
 - Use double asterisks (`**`) to mark a word or text in bold (`**bold**`).
@@ -222,6 +236,15 @@ For other punctuation rules, please refer to the
   E.g., instead of writing something like `Read more about GitLab Issue Boards [here](LINK)`,
   write `Read more about [GitLab Issue Boards](LINK)`.
 
+### Unlinking emails
+
+By default, all email addresses will render in an email tag on docs.gitlab.com.
+To escape the code block and unlink email addresses, use two backticks:
+
+```md
+`` example@email.com ``
+```
+
 ## Navigation
 
 To indicate the steps of navigation through the UI:
@@ -262,6 +285,16 @@ Inside the document:
 - If a heading is placed right after an image, always add three dashes (`---`)
   between the image and the heading.
 
+### Remove image shadow
+
+All images displayed on docs.gitlab.com have a box shadow by default.
+To remove the box shadow, use the image class `.image-noshadow` applied
+directly to an HTML `img` tag:
+
+```html
+<img src="path/to/image.jpg" alt="Alt text (required)" class="image-noshadow">
+```
+
 ## Code blocks
 
 - Always wrap code added to a sentence in inline code blocks (``` ` ```).