A table that looks good on mobile and desktop | Hacker News Reader

A table that looks good on mobile and desktop

many.pw

55 pointsandrewfromx19 comments

No thanks. If I need to review a table on mobile, I still much prefer just rotating to landscape, which mobile handles quite well. This very opinionated implementation forces me to switch to desktop mode and rotate to landscape when reaching for pragmatic utility. Surely there's a reasonable usecase, but I really can't think of any tabular data that I regularly review where "tranpose-serialize" would result in a net positive UX.

I'm not sure what mobile you're using, but on Firefox Mobile on Android, if I rotate it to landscape, the tables turn into regular tables like in desktop mode, but I didn't have to change to desktop mode.

I'd go with something like this:

name: Zog, Luna, Glimmer, Xylon, Astra

age: 150, 200, 75, 300, 120

species: Xenon, Lunarian, Nebulite, Celestial, Stardust

home_planet: Zeta-7, Moon, Nebula-9, Alpha Centauri, Polaris

language: Zorgon, Lunar, Stellar, Cosmic, Celestial

occupation: Astrobiologist, Quantum Physicist, Astroengineer, Interstellar Diplomat, Astroarchaeologist

or just rotate the table:

  name:        Zog,            Luna,              Glimmer,       Xylon,                 Astra
  age:         150,            200,               75,            300,                   120
  species:     Xenon,          Lunarian,          Nebulite,      Celestial,             Stardust
  home_planet: Zeta-7,         Moon,              Nebula-9,      Alpha Centauri,        Polaris
  language:    Zorgon,         Lunar,             Stellar,       Cosmic,                Celestial
  occupation:  Astrobiologist, Quantum Physicist, Astroengineer, Interstellar Diplomat, Astroarchaeologist

Having to scroll is fine

https://jsfiddle.net/ok89bh3j/

This really needs to be a userscript (if possible), does anyone know a way to run javascript helpers like this on Chrome on Android without going to a completely different browser that supports it straight-up (like firefox?)

Could you inject it as a bookmarklet?

If not, you could probably just paste it into Eruda (https://eruda.liriliri.io/)

It overflows right on WebView (non chrome) Android browsers. Update: On chrome too, my window.innerWidth=360

On iOS too. I have to scroll sideways to read it all, although there is a lot of white space.

not the table part right? Just the html explanation below it? Yeah I need to fix that.

Full-width tables require extra eye scanning. Auto-width is better most of the time.

I don't mind having to scroll a table if it doesn't fit in the view. Scrolling is better than trying to mentally piece together the rows and columns.

As in a lot of areas, less fussing with styles/CSS is better.

It completely depends on what you want to do with the information in the table.

Yeah, it's marginally more strain on your eyeballs to track some 30 degrees across your field of view than glancing back and forth, but that only matters if you're reading every single value from left to right, row by row. It's extremely common to want to also compare values from top to bottom, column by column - or even just one particular column, known only to the reader. That's the whole point of a 2D table.

It's one thing for an e-reader to have an option to flow longform text across multiple columns for that one guy with a 5120 x 2160 monitor who chooses to view the text in full-screen, another to apply "too wide is bad" everywhere.

In particular, this looks stupidly blank in landscape mode on my 21:9 smartphone. Toggling Firefox to "Desktop Mode" shows it easily fits in that orientation.

This would be more convincing if the table looked good on mobile. On iOS, anyway, it is too wide for the page and wants horizontal scrolling to read the full title and table.

Same here on Firefox Android.

Isn’t this just 2 tables with one hidden at a time?

Definitely. I thought this was going to be a single, semantically correct table that had some fancy use of the display property across the different elements to make them align differently (though that would help with the table headers).

I actually think this is probably the more practical approach, though I wonder what screen readers make of the mobile version compared to traversing a normal table structure.

You need to test with very long occupation names. How do these tables break text?

oh i left it out of the example to keep it simple but there is:

https://github.com/andrewarrow/a-table-that-looks-good-on-mo...

and I set:

  colAttributes := map[int]string{}
  colAttributes[0] = "w-1/2"

https://github.com/andrewarrow/a-table-that-looks-good-on-mo...

to make tailwind handle a column that needs to wrap.

Perhaps cards are the answer? The minified table kind of looks like a card.

Also, tables are good for scanning for something in a lot of data. Cards don't do that very well.

ok if you refresh, I think I fixed the issue with horizontal scroll. It was the <pre> tags for the code samples.

Seems more from a fan of extended print in psql.

Reply on news.ycombinator.com