ninja/_table-responsive.css at main · anyblades/ninja · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*
<!--section:code-->
```css */
table.responsive,
.breakout > table:not(.does-not-exist),
.breakout-all > table:not(.does-not-exist) {
  /* Center horizontally */
  margin-left: 50%;
  transform: translateX(-50%);

  /* Let them full-bleed */
  width: max-content;
  min-width: auto;
  max-width: 100dvw;
  padding-inline: 7.5%;

  /* Let them scroll */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */

  th,
  td {
    padding-inline-start: 0;
  }
}
/*```
`table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`

<!--section:summary-->

`.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
Tables inside https://blades.dev/css/breakout/ are responsive by default.

<!--section:docs-->

### Demo table

| Term              | Description <hr class="x2">                                                                                                                                                                  | Link                                                |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |

{.responsive}

---

Living examples: <!--A-Z-->
- https://blades.dev/ai/ide/
- https://blades.dev/build-awesome-11ty/starters/
- https://blades.dev/css/frameworks/
- https://blades.dev/ssg/

<!--section--> */