The formatting of HTML tables is adjusted between IPython and LiveReveal/RISE. This includes adjusted column widths, and text centering during the slideshow. Sample notebook below:
{
"cells": [
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": true,
"slideshow": {
"slide_type": "skip"
}
},
"outputs": [],
"source": [
"#Load\n",
"from IPython.display import HTML"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"##Make an HTML Table"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"collapsed": true,
"slideshow": {
"slide_type": "skip"
}
},
"outputs": [],
"source": [
"Q=\"\"\"<style type=\"text/css\">\n",
".tg {border-collapse:collapse;border-spacing:0;}\n",
".tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}\n",
".tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}\n",
".tg .tg-s6z2{text-align:center}\n",
".tg .tg-y7ca{font-weight:bold;background-color:#93ce84;text-align:center}\n",
".tg .tg-j4kc{background-color:#efefef;text-align:center}\n",
"</style>\n",
"<table class=\"tg\">\n",
" <tr>\n",
" <th class=\"tg-s6z2\" colspan=\"2\" rowspan=\"2\"></th>\n",
" <th class=\"tg-y7ca\" colspan=\"6\">Hour</th>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">1<br></td>\n",
" <td class=\"tg-j4kc\">2</td>\n",
" <td class=\"tg-j4kc\">...</td>\n",
" <td class=\"tg-j4kc\">22</td>\n",
" <td class=\"tg-j4kc\">23</td>\n",
" <td class=\"tg-j4kc\">24</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-y7ca\" rowspan=\"5\">The<br>Goods</td>\n",
" <td class=\"tg-j4kc\">0.00</td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">1.2</td>\n",
" <td class=\"tg-s6z2\">0.0</td>\n",
" <td class=\"tg-s6z2\">0</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">0.05</td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">1.8</td>\n",
" <td class=\"tg-s6z2\">0.1<br></td>\n",
" <td class=\"tg-s6z2\">0</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">...</td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">...</td>\n",
" <td class=\"tg-s6z2\">...</td>\n",
" <td class=\"tg-s6z2\">...</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">1.95<br></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">3.5</td>\n",
" <td class=\"tg-s6z2\">1.2</td>\n",
" <td class=\"tg-s6z2\">0</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">2.00</td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">3.6</td>\n",
" <td class=\"tg-s6z2\">1.3</td>\n",
" <td class=\"tg-s6z2\">0</td>\n",
" </tr>\n",
"</table>\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {
"collapsed": false,
"slideshow": {
"slide_type": "slide"
}
},
"outputs": [
{
"data": {
"text/html": [
"<style type=\"text/css\">\n",
".tg {border-collapse:collapse;border-spacing:0;}\n",
".tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}\n",
".tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}\n",
".tg .tg-s6z2{text-align:center}\n",
".tg .tg-y7ca{font-weight:bold;background-color:#93ce84;text-align:center}\n",
".tg .tg-j4kc{background-color:#efefef;text-align:center}\n",
"</style>\n",
"<table class=\"tg\">\n",
" <tr>\n",
" <th class=\"tg-s6z2\" colspan=\"2\" rowspan=\"2\"></th>\n",
" <th class=\"tg-y7ca\" colspan=\"6\">Hour</th>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">1<br></td>\n",
" <td class=\"tg-j4kc\">2</td>\n",
" <td class=\"tg-j4kc\">...</td>\n",
" <td class=\"tg-j4kc\">22</td>\n",
" <td class=\"tg-j4kc\">23</td>\n",
" <td class=\"tg-j4kc\">24</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-y7ca\" rowspan=\"5\">The<br>Goods</td>\n",
" <td class=\"tg-j4kc\">0.00</td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">1.2</td>\n",
" <td class=\"tg-s6z2\">0.0</td>\n",
" <td class=\"tg-s6z2\">0</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">0.05</td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">1.8</td>\n",
" <td class=\"tg-s6z2\">0.1<br></td>\n",
" <td class=\"tg-s6z2\">0</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">...</td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">...</td>\n",
" <td class=\"tg-s6z2\">...</td>\n",
" <td class=\"tg-s6z2\">...</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">1.95<br></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">3.5</td>\n",
" <td class=\"tg-s6z2\">1.2</td>\n",
" <td class=\"tg-s6z2\">0</td>\n",
" </tr>\n",
" <tr>\n",
" <td class=\"tg-j4kc\">2.00</td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\"></td>\n",
" <td class=\"tg-s6z2\">3.6</td>\n",
" <td class=\"tg-s6z2\">1.3</td>\n",
" <td class=\"tg-s6z2\">0</td>\n",
" </tr>\n",
"</table>"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"execution_count": 9,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"HTML(Q)"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
"Looks good in IPython, but in LiveReveal, the widths are shifted, in addition to centering of values."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "subslide"
}
},
"source": [
"Using:\n",
"\n",
"- Python 2.7, IPython 3.0.0\n",
"- Firefox and Chrome (issue on both)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 2",
"language": "python",
"name": "python2"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 2
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython2",
"version": "2.7.7"
}
},
"nbformat": 4,
"nbformat_minor": 0
}