How to make all the tables foldable using CSS snippets

[Choco]

Things I have tried

I searched Mermaid in help docs but couldn’t find anything

What I’m trying to do

What I’m trying to do is to make all my multiple long tables foldable because I’m only using a mobile device. I tried to use this in my snippets

overflow-x: auto;
overflow-y: auto;
height: 580px;
width: 100%;

But the CSS above is affecting my dataview tables it occupies more space even if it only has five lines

So I thought what if my multiple long tables are foldable like the headers do, so I can remove the vertical overflow maybe it can help, but I don’t know how. I am using a minimal theme also and that’s why

[CawlinTeffid]

I’m not sure I understand how a table would fold, but for your existing snippet you could try replacing “height” with “max-height” to prevent it from using more space than it needs.

[Choco]

Hi, I tried to use max-height but it’s not working in the dataview tables

[Fuyuu]

How about using callout? add > in front of ‘’’
for example

>[!quote]- Table Title
>```dataview
table bla bla bla
>```

[Choco]

Didn’t work

This is my snippet

.markdown-preview-view table {
display: block;
width: 100%;
height: 500px;
max-height: max-content;
max-height: -moz-max-content;
max-width: -moz-max-content;
max-width: max-content;
margin: 0 auto;
overflow-x: auto;
white-space: nowrap;
}

th {
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 2;
background: black;
}

[Fuyuu]

Is this the result you want to approach?

[CawlinTeffid]

In your snippet, remove all of those max-height lines and replace height: 500px with max-height: 500px. Or did you already try that and what you have now is further experiments?

[Choco]

max-height: 500px; is not working short tables still have excessive space, The color orange box in the image below

[Choco]

No. I tried that one but still has space

[Choco]

This is my current snippet

.markdown-preview-view table {
display: block;
width: 100%;
height: 500px;
max-height: 500px;
margin: 0 auto;
overflow-x: auto;
white-space: nowrap;
}

[Fuyuu]

just dont set height or anything the table could adapt itself

[Choco]

Yes this is what i did but when long tables are not scrollable virtically. Its ok

[Fuyuu]

if pressing collapse button does not do anything then I have no idea why your callout is un-collapsable. callout is a built-in feature it should work pretty well.

[CawlinTeffid]

I see you found a solution, but FYI: using height: 500 and max-height: 500 together has the exact same effect as just setting the height — you will always get 500. You have to get rid of the height for the max-height to do what you want here.