Webpack.js.org: Comparison Page Table is Very Difficult to View

[webpack-bot]

What is the current behavior?

Goto https://webpack.js.org/comparison/ see a giant table ... but you can't actually see most of the table because the scroll bars are several pages down, and if you try to use them you've already lost whatever it was you were trying to scroll to see at the top of the table.

If the current behavior is a bug, please provide the steps to reproduce.
See above.

What is the expected behavior?

Either:

A) Remove CSS truncation code and let the browser do the scrolling as God intended, or

B) Use the appropriate table tags so that the table body scrolls naturally, but the table headers are always visible, then cap its height at the page's height.

Other relevant information:

Browser: Latest Chrome

---

This issue was moved from webpack/webpack#7503 by @evilebottnawi. Original issue was by @machineghost.

[FadySamirSadek]

Will pick this one up

[Legends]

@FadySamirSadek :

This would be nice:

• Vertically fixed header columns, whereas the Feature Column is fixed horizontally too.
• Feature table-body columns (blue): fixed horizontally, but not vertically
• Bundling tools table-body columns (green): scrolling vertically and horizontally allowed.

[FadySamirSadek]

@Legends sounds like a plan, thank you so much for the diagram

[Legends]

yaeh, but I am not sure if this works on mobile...

[FadySamirSadek]

@Legends it will work if I separated the header row and the features column from the table content and put them in another table but I feel there is definitely nicer solutions that I am not aware of but will do my research ,try to play around and test on multiple devices

[Legends]

That makes sense... one of the best html table libs I am aware of is datatables, don't know if it works with React..

[FadySamirSadek]

@Legends there is something similar in react: react-table.js.org/ will give it a try. They have an example with fixed headers in vertical scrolling so it looks promising

[Legends]

@montogeek Do we have a contingent of testing hours on browserstack or similar for webpack/webpack.js.org ? Or how do you test cross-browser support?

[machineghost]

I kind of think DataTables, or any plug-in, might be a bit much here. The desired effect can be created vertically just by using the correct HTML elements (thead, tbody, th, etc.) and the horizontal scrolling can be achieved with a relatively small amount of CSS: https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body

[Legends]

@machineghost You're totally right. Another lib for a simple table is too much...

[montogeek]

@Legends I am building some tests for rebuild branch