Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

force table to fit in the article width #717

Merged
merged 4 commits into from
Jun 11, 2022
Merged

force table to fit in the article width #717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f9cba00
force table to fit in the article width
12rambau Jun 11, 2022
e084e5d
add a table with giant content
12rambau Jun 11, 2022
ec96f49
proofwritting
12rambau Jun 11, 2022
5431d33
cleaning
12rambau Jun 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/demo/kitchen-sink/lists-and-tables.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,24 @@ Giant Tables
| body row 1 | column 2 | column 3 | body row 1 | column 2 | column 3 | body row 1 | column 2 | column 3 | body row 1 | column 2 | column 3 |
+------------+------------+-----------+------------+------------+-----------+------------+------------+-----------+------------+------------+-----------+

Giant Content
^^^^^^^^^^^^^

If table cells are filled with a lot of words, they should wrap in order to fit the page width.

+------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Header 1 | Header 2 |
+============+============================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================+
| body row 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis varius odio ac pellentesque. Ut euismod tellus at leo pellentesque, in pulvinar elit elementum. Nulla ut enim ullamcorper, elementum felis non, blandit quam. Vestibulum ante erat, sagittis et vulputate a, molestie ut urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat, arcu a fringilla sodales, magna dolor vulputate nulla, nec sodales libero augue et augue. Donec tristique sit amet turpis in egestas. Ut vitae urna euismod, viverra diam sed, egestas justo. Etiam tortor quam, auctor sit amet rhoncus quis, mattis eget diam. |
+------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| body row 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis varius odio ac pellentesque. Ut euismod tellus at leo pellentesque, in pulvinar elit elementum. Nulla ut enim ullamcorper, elementum felis non, blandit quam. Vestibulum ante erat, sagittis et vulputate a, molestie ut urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat, arcu a fringilla sodales, magna dolor vulputate nulla, nec sodales libero augue et augue. Donec tristique sit amet turpis in egestas. Ut vitae urna euismod, viverra diam sed, egestas justo. Etiam tortor quam, auctor sit amet rhoncus quis, mattis eget diam. |
+------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| body row 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis varius odio ac pellentesque. Ut euismod tellus at leo pellentesque, in pulvinar elit elementum. Nulla ut enim ullamcorper, elementum felis non, blandit quam. Vestibulum ante erat, sagittis et vulputate a, molestie ut urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat, arcu a fringilla sodales, magna dolor vulputate nulla, nec sodales libero augue et augue. Donec tristique sit amet turpis in egestas. Ut vitae urna euismod, viverra diam sed, egestas justo. Etiam tortor quam, auctor sit amet rhoncus quis, mattis eget diam. |
+------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| body row 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis varius odio ac pellentesque. Ut euismod tellus at leo pellentesque, in pulvinar elit elementum. Nulla ut enim ullamcorper, elementum felis non, blandit quam. Vestibulum ante erat, sagittis et vulputate a, molestie ut urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat, arcu a fringilla sodales, magna dolor vulputate nulla, nec sodales libero augue et augue. Donec tristique sit amet turpis in egestas. Ut vitae urna euismod, viverra diam sed, egestas justo. Etiam tortor quam, auctor sit amet rhoncus quis, mattis eget diam. |
+------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+


List Tables
-----------

Expand Down
10 changes: 10 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/content/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,13 @@ table caption {
text-align: center;
caption-side: top;
}

// ensure table will fit in the article width and make them y-scrollable
table {
display: block;
max-width: 100%;
overflow: auto;

@include scrollbar-style();
@include scrollbar-on-hover();
}
10 changes: 0 additions & 10 deletions src/pydata_sphinx_theme/assets/styles/sections/_article.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,4 @@
@include media-breakpoint-down(md) {
padding: 3rem 1rem 1rem 1rem;
}

.section {
max-width: 100%;

// make every overflowing elements in main content scrollable
table {
display: block;
overflow: auto;
}
}
}