Bulma: Responsive table

[brunodplima]

Is it about Bulma or about the Docs? Bulma
Is it a bug/feature/question or do you need help? feature
If it's a bug, is it a browser bug? N/A

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma 0.5.1
My browser is: Google Chrome
This is a Sass issue: I'm using version [3.5.1]
I am sure this issue is not a duplicate?

Description

Make a table horizontally scrollable on smaller screen widths.

Related issues: #939.

[brunodplima]

Demo: https://codepen.io/brunodplima/full/rzpaLO/

[ankibalyan]

Any plans to merge this pull request? This should be included.

[tony]

I thought bulma had responsive tables already.

[tony]

https://github.com/jgthms/bulma/pull/1081#issuecomment-346448421

That is the wrong attitude to have. Otherwise, Bulma would have "okay-ish" solutions for almost everything, increasing the size of the core, introducing lots of potential bugs, and promoting bad design.

You didn't ask for clarification. "What do you mean?" I ported that PR to my site.

I wasn't even commenting on the merits of the PR and it being in bulma, just that in my situation it was better than having tables overlap my sidebar.

[megapctr]

In case someone finds this issue while trying to make a table mobile-friendly, here's what you could do.

Wrap the table in a div, and apply overflow-x: auto; on it. I haven't tested it on all browsers but it works well enough for me.

[bpicolo]

There's also the use case where I want tables to expand to fit available space. Overflow changes aren't sufficient there. (Though setting table width to 100% does help)

[megapctr]

@bpicolo You could use <table class="table is-fullwidth"> for that

[Fingel]

I think the solution in the linked PR is really nice. Too bad it seems to have been met with so much hostility and rejected. I guess I'll just pull the css into my projects, it's a shame really.

Edit: Link to PR: https://github.com/jgthms/bulma/pull/1081

[yusufbicer]

https://codepen.io/alico/pen/bpLgOL

i think bulma can inspire from this responsive table.

[koddr]

So, @jgthms, what is the solution you recommend?

[mm98]

An "easy" solution could be something like this: https://codepen.io/AllThingsSmitty/pen/MyqmdM (not mine). Labels are populated from TD "data-label" attribute. Pure CSS.

Buefy use the same concept: https://buefy.org/documentation/table

@media screen and (max-width: 768px) {
    .table.has-mobile-cards thead { display: none }
    .table.has-mobile-cards tfoot th { border: 0; display: inherit }
    .table.has-mobile-cards tr { box-shadow: 0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1); max-width: 100%; position: relative; display: block }
    .table.has-mobile-cards tr td { border: 0; display: inherit }
    .table.has-mobile-cards tr td:last-child { border-bottom: 0 }
    .table.has-mobile-cards tr:not(:last-child) { margin-bottom: 1rem }
    .table.has-mobile-cards tr:not([class*=is-]) { background: inherit }
    .table.has-mobile-cards tr:not([class*=is-]):hover { background-color: inherit }
    .table.has-mobile-cards tr.detail { margin-top: -1rem }
    .table.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td { display: -ms-flexbox; display: flex; width: auto; -ms-flex-pack: end; justify-content: flex-end; text-align: right; border-bottom: 1px solid #f5f5f5 }
    .table.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td:before { content: attr(data-label); font-weight: 600; margin-right: auto; padding-right: .5em; text-align: left }
}

[jgthms]

There's already a table-container class: https://github.com/jgthms/bulma/blob/master/sass/elements/table.sass#L112

Just need to write some documentation.

[nuthingman]

Sorry if this is the wrong place to ask for clarification. So the correct way to do responsive table is by wrapping table with <div class="table-container"></div> ?

[samuelterra22]

@nuthingman, here is an example:

<div class="box">
      <div class="table-container">
        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth table-container">
        </table>
      </div>
</div>

[Cholowao]

Almost two year now, people are discussing about putting overflow-x: auto; on the Bulma source code...

[Wulfheart]

It's still unclear.

[dannluciano]

Hi, anyone has the best suggestion? I liked that https://codepen.io/alico/pen/bpLgOL

[nullbio]

overflow-x: auto; is not a real solution to this problem, it's not intuitive to force users to scroll - especially when the scrollbar is not visible by default in mobile views. Something like the link from
dannluciano or this: https://codepen.io/AllThingsSmitty/pen/MyqmdM would be the way to go.

[hovancik]

FYI: if you have table inside hero which is is-fullheight, remove the is-fullheight to get a scroll on mobile.

[ais-one]

This issue has been resolved.

https://bulma.io/documentation/elements/table/#table-container

If it does not "work". I would like suggest you remove all other elements wrapping the table-container and see that it is working...

Then slowly add them in one by one to see which one is interfering with the scroll that you need on small device widths

There's already a table-container class: https://github.com/jgthms/bulma/blob/master/sass/elements/table.sass#L112

Just need to write some documentation.