fix HTML repr table rendering

[drammock]

closes #12775

WIP because I haven't addressed appearance in notebooks or IDEs yet. But in the meantime at least y'all can see how it looks in the built docs, and offer feedback.

[drammock]

here's what the repr HTML tables look like on built docs:

https://output.circle-artifacts.com/output/job/df0a833c-b387-4034-a9e4-f3d59d80ef3f/artifacts/0/html/auto_tutorials/raw/20_event_arrays.html#sphx-glr-auto-tutorials-raw-20-event-arrays-py

The buttons for showing bad channels are a bit wonky; I'll have to work on that. Pushing commits now that make it look ok in Jupyter notebook. I tried tackling VSCode interactive pane too... but the whole notebook gets hidden in an iframe and I can't seem to access the individual DOM elements in the notebook output cells via the built-in developer tools pane... maybe @hoechenberger can point me in the right direction (or just push some commits).

[larsoner]

@drammock I marked for 1.8, this is probably a blocker right?

[drammock]

@drammock I marked for 1.8, this is probably a blocker right?

could also just backport it afterwards I guess? I will try to finish today but can't promise it.

[larsoner]

Yeah backporting seems okay!

[drammock]

OK here are some screenshots (hover effect does work in Jupyter light mode, I must have just wiggled the mouse when screenshotting):

Sphinx

Jupyter

VSCode

[hoechenberger]

Aren't the carets in Jupyter and VS Code swapped between "opened" and "collapsed" state?

[hoechenberger]

just want to add, i think this is a great job, @drammock
I'm currently on a hiking trip in the mountains with limited internet access (and only through my phone), so cannot really test or provide thorough feedback until next week or so

[drammock]

Aren't the carets in Jupyter and VS Code swapped between "opened" and "collapsed" state?

oops yes, good catch.

[drammock]

@hoechenberger @larsoner this one is ready!

[larsoner]

I looked at the examples and reports and they look great, thanks @drammock !