Skip to content

Commit d5f658b

Browse files
authored
v1.1 (#14)
* Improve table * Add smooth scrolling * Use smaller font size for code * Update version
1 parent 63aaf46 commit d5f658b

3 files changed

Lines changed: 56 additions & 6 deletions

File tree

README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,32 @@ This repo is set up with [Netlify's continuous deployment](https://docs.netlify.
3030
## Contributing
3131

3232
Pull requests are welcome! If you find a bug or have a feature request, please submit a GitHub issue.
33+
34+
## Alternative features
35+
36+
Not all UI features can be implemented with classless CSS while remaining accessible and supported cross-browser. For more complex features, you may need to supplement this framework with additional HTML, CSS, or JavaScript.
37+
38+
Here are some suggestions for altering the behavior of certain elements.
39+
40+
**Feature**
41+
42+
Make `table`s scroll horizontally when they are wider than the main content width.
43+
44+
Desired behavior:
45+
![HTML table with horizontal scroll](https://user-images.githubusercontent.com/2905455/120902460-6bbadd80-c5f5-11eb-9d9d-1aea260b7f8f.gif)
46+
47+
Note: In **OK.css**, `table`s are set to `display: table` for [accessibility reasons](https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/).
48+
49+
**Implementation**
50+
51+
Wrap the table in a `<div>` with `overflow-x: scroll;`:
52+
53+
```
54+
<div style="overflow-x: scroll">
55+
<table>
56+
...
57+
</table>
58+
</div>
59+
```
60+
61+
One caveat is that this can prevent the table heading from sticking when scrolling vertically.

0 commit comments

Comments
 (0)