Search code examples
visual-studio-codejupyter-notebook

Adding borders to Visual Studio Code Jupyter Notebook table rendering

I am using Visual Studio code for Jupyter Notebook work.

I am outputting Pandas DataFrames as:

display(df)

DataFrame's have MultiIndex which Visual Studio Code table output almost manages to colour with stripes correctly.

Visual Studio Code does not render borders for table cells, making complex tables hard to read:

enter image description here

The same table has borders in Datalore (Jetbrains):

enter image description here

Is there a way for me to make Visual Studio Code have borders in its notebook table renderer?

Solution

  • This is fixed now(?). An issue ticket was raised about it at Can't have tables with borders because of hard coded !important style #210462, which was addressed in remove important! on style #214044.

    Answer before this was fixed

    The offending source code in VS Code that causes this is in https://github.com/microsoft/vscode/blob/b216b43c2fd922a34a492e45e2ebcb0e51f5de58/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts#L424. It makes borders for table cells have no width and be transparent, with CSS !important.

    I see people claiming in other non-VS-Code-specific Q&A that they can use dataframe.style.set_table_styles but I tried their code and it didn't work for me. Ex. https://stackoverflow.com/a/73103949/11107541, set_table_styles not displaying in VSCode.

    The same workaround in Python Jupyter Notebook styled dataframe with borders (another related, non-VS-Code-specific Q&A) should work (I'm proud to say I knew to do this without first seeing that, but nobody cares).

    Create a cell to add styles:

    %%html
<style>
  th,td { border: 5px solid red !important; }
</style>

    You need to run that cell for it to take effect on the outputs of other cells. The CSS I used was just an example. Do whatever you want there. Use padding or margin, or whatever if you want.

    I would suggest to put this in an IPython startup file, but the VS Code Jupyter extension doesn't support those right now, and instead only has the jupyter.runStartupCommands setting, but that doesn't seem to support such an HTML cell.

    If you find it problematic that VS Code's builtin styles do this to tables, you can raise an issue ticket about it.