Skip to content
This repository has been archived by the owner on Feb 11, 2022. It is now read-only.

Commit

Permalink
fix: set min-width on first-child table columns
Browse files Browse the repository at this point in the history 
Set a minimum width for `td:first-child` elements.
Also document current table styles in styleguide.
  • Loading branch information
Schalk Neethling committed Apr 15, 2021
1 parent aeb61f3 commit dc60f2c
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 2 deletions.
8 changes: 8 additions & 0 deletions sass/atoms/_tables.scss
View file
Expand Up @@ -11,6 +11,14 @@ table {
border: 1px solid $neutral-500;
padding: $base-spacing / 2;
text-align: left;

&:first-child {
min-width: 150px;

@media #{$mq-small-desktop-and-up} {
min-width: 200px;
}
}
}

pre {
Expand Down
10 changes: 10 additions & 0 deletions styleguide/assets/minimalist/main.css
View file
Expand Up @@ -1043,6 +1043,16 @@ table td {
padding: 12px;
text-align: left;
}
table th:first-child,
table td:first-child {
min-width: 150px;
}
@media all and (min-width: 63.9385em) {
table th:first-child,
table td:first-child {
min-width: 200px;
}
}
table pre {
background-color: #fff;
}
Expand Down
182 changes: 182 additions & 0 deletions styleguide/content/tables/index.md
View file
@@ -0,0 +1,182 @@
---
title: Tables - MDN Minimalist
keywords: tables, table element, mdn minimalist, mdn, sass, library
description: The MDN Web Docs table element styles
---

# Tables

## Standard table

This is the most commonly used table style across MDN Web Docs. It is achieved by adding the `standard-table` class to the `table` element.

> Note: Notice the use of the `thead` element as well as the `scope` attribute on the `th` elements. This is critical to set correctly to ensure our table data is exposed correctly to assistive technologies.
<table class="standard-table">
<thead>
<tr>
<th scope="col">Attribute</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><a href="#autocorrect">autocorrect</a></code></td>
<td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td>
</tr>
<tr>
<td><code><a href="#incremental">incremental</a></code></td>
<td>Whether or not to send repeated <a href="/en-US/docs/Web/API/HTMLInputElement/search_event" title="search"><code>search</code></a> events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
</tr>
<tr>
<td><code><a href="#webkitdirectory">webkitdirectory</a></code></td>
<td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code><a href="#multiple">multiple</a></code> is also present)</td>
</tr>
</tbody>
</table>

### Code

```html
<table class="standard-table">
<thead>
<tr>
<th scope="col">Attribute</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><a href="#autocorrect">autocorrect</a></code>
</td>
<td>
A string indicating whether or not autocorrect is <code>on</code> or
<code>off</code>. <strong>Safari only.</strong>
</td>
</tr>
<tr>
<td>
<code><a href="#incremental">incremental</a></code>
</td>
<td>
Whether or not to send repeated
<a
href="/en-US/docs/Web/API/HTMLInputElement/search_event"
title="search"
><code>search</code></a
>
events to allow updating live search results while the user is still
editing the value of the field.
<strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong>
</td>
</tr>
</tbody>
</table>
```

## Properties table

Property tables is most commonly used for technical summaries such as [the table seen here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#technical_summary). The style is achieved by adding the class `properties` to the `table` element.

> Note: Notice the use of the `th` elements in each row as well as the `scope` attribute. This is critical to set correctly to ensure our table data is exposed correctly to assistive technologies.
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories"
data-flaw="link5">Content categories</a></th>
<td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content"
data-flaw="link6">Flow content</a>, phrasing content, embedded
content. If it has a <a
href="/en-US/docs/Web/HTML/Element/video#attr-controls"><code>controls</code></a>
attribute: interactive content and palpable content.</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>
<p>If the element has a <a
href="/en-US/docs/Web/HTML/Element/video#attr-src"><code>src</code></a>
attribute: zero or more <a
href="/en-US/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a>
elements, followed by transparent content that contains no media
elements–that is no <a
href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>
or <a
href="/en-US/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>
</p>
<p>Else: zero or more <a
href="/en-US/docs/Web/HTML/Element/source"><code>&lt;source&gt;</code></a>
elements, followed by zero or more <a
href="/en-US/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a>
elements, followed by transparent content that contains no media
elements–that is no <a
href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>
or <a
href="/en-US/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>.
</p>
</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>None, both the starting and ending tag are mandatory.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>Any element that accepts embedded content.</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No
corresponding role</a></td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td><code><a href="https://w3c.github.io/aria/#application" class="external">application</a></code>
</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td><a
href="/en-US/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a>
</td>
</tr>
</tbody>
</table>

### Code

```html
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a
href="/en-US/docs/Web/Guide/HTML/Content_categories"
data-flaw="link5"
>Content categories</a
>
</th>
<td>
<a
href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content"
data-flaw="link6"
>Flow content</a
>, phrasing content, embedded content. If it has a
<a href="/en-US/docs/Web/HTML/Element/video#attr-controls"
><code>controls</code></a
>
attribute: interactive content and palpable content.
</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>None, both the starting and ending tag are mandatory.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>Any element that accepts embedded content.</td>
</tr>
</tbody>
</table>
```
3 changes: 3 additions & 0 deletions styleguide/layouts/index.html
View file
Expand Up @@ -19,6 +19,9 @@ <h1>{{ .Params.home.heading }}</h1>
<li>
<a href="forms/">Forms</a>
</li>
<li>
<a href="tables/">Tables</a>
</li>
</ul>
</main>
{{ end }}
2 changes: 1 addition & 1 deletion ...de/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.content
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...guide/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.json
View file
@@ -1 +1 @@
{"Target":"minimalist/main.min.24c855effdb6e10f9ff525988c6181ee3774c4ba269a87959f3deb3b2aeb099f.css","MediaType":"text/css","Data":{"Integrity":"sha256-JMhV7/224Q+f9SWYjGGB7jd0xLommoeVnz3rOyrrCZ8="}}
{"Target":"minimalist/main.min.24e191c8d4c24ad1842ae2bb897abffb91c63fc761b7ff7cebc62e456c31eb4b.css","MediaType":"text/css","Data":{"Integrity":"sha256-JOGRyNTCStGEKuK7iXq/+5HGP8dht/9868YuRWwx60s="}}

0 comments on commit dc60f2c

Please sign in to comment.