4

I have a problem making the text inside the <td> tags align to the left when drawing a list of data in Jupyter notebook as an HTML table. I'm on Jupyter 5.0.0.

from IPython.display import HTML

s = """<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1xxxxx</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2xxxxxxxx</td>
</tr>
</table>"""
HTML(s)

The text in the cells is aligned to the right. What is strange is that at another machine with the same version of Jupyter, the text is aligned to the left.

In the sample notebook, their HTML td text is aligned to the left: http://nbviewer.jupyter.org/github/ipython/ipython/blob/4.0.x/examples/IPython%20Kernel/Rich%20Output.ipynb#HTML

What are the css settings in the Jupyter notebook that control the alignment?

Alex Tereshenkov
  • 3,340
  • 8
  • 36
  • 61
  • Not quite a duplicate, but seems related to this other question - https://stackoverflow.com/questions/32156248/how-do-i-set-custom-css-for-my-ipython-ihaskell-jupyter-notebook – Sam Storie Oct 31 '17 at 16:30

1 Answers1

1

You can add the style='text-align:left' attribute to any tag. For example:

<td style='text-align:left'>row 1, cell 1xxxxx</td>

will align that particular cell to the left.

ryanhill1
  • 165
  • 1
  • 9