Fix DataFrame/Table style (#3428)

* Fix DataFrame table style

* Add tables to examples output notebook

examples/notebooks/OutputExamples.ipynb

@@ -599,6 +599,186 @@
     "    print(10**10)\n",
     "    display(svg)"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## HTML Tables"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import altair as alt"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "df = alt.load_dataset('cars')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div>\n",
+       "<style>\n",
+       "    .dataframe thead tr:only-child th {\n",
+       "        text-align: right;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe thead th {\n",
+       "        text-align: left;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe tbody tr th {\n",
+       "        vertical-align: top;\n",
+       "    }\n",
+       "</style>\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>Acceleration</th>\n",
+       "      <th>Cylinders</th>\n",
+       "      <th>Displacement</th>\n",
+       "      <th>Horsepower</th>\n",
+       "      <th>Miles_per_Gallon</th>\n",
+       "      <th>Name</th>\n",
+       "      <th>Origin</th>\n",
+       "      <th>Weight_in_lbs</th>\n",
+       "      <th>Year</th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "    <tr>\n",
+       "      <th>0</th>\n",
+       "      <td>12.0</td>\n",
+       "      <td>8</td>\n",
+       "      <td>307.0</td>\n",
+       "      <td>130.0</td>\n",
+       "      <td>18.0</td>\n",
+       "      <td>chevrolet chevelle malibu</td>\n",
+       "      <td>USA</td>\n",
+       "      <td>3504</td>\n",
+       "      <td>1970-01-01</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>1</th>\n",
+       "      <td>11.5</td>\n",
+       "      <td>8</td>\n",
+       "      <td>350.0</td>\n",
+       "      <td>165.0</td>\n",
+       "      <td>15.0</td>\n",
+       "      <td>buick skylark 320</td>\n",
+       "      <td>USA</td>\n",
+       "      <td>3693</td>\n",
+       "      <td>1970-01-01</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>2</th>\n",
+       "      <td>11.0</td>\n",
+       "      <td>8</td>\n",
+       "      <td>318.0</td>\n",
+       "      <td>150.0</td>\n",
+       "      <td>18.0</td>\n",
+       "      <td>plymouth satellite</td>\n",
+       "      <td>USA</td>\n",
+       "      <td>3436</td>\n",
+       "      <td>1970-01-01</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>3</th>\n",
+       "      <td>12.0</td>\n",
+       "      <td>8</td>\n",
+       "      <td>304.0</td>\n",
+       "      <td>150.0</td>\n",
+       "      <td>16.0</td>\n",
+       "      <td>amc rebel sst</td>\n",
+       "      <td>USA</td>\n",
+       "      <td>3433</td>\n",
+       "      <td>1970-01-01</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>4</th>\n",
+       "      <td>10.5</td>\n",
+       "      <td>8</td>\n",
+       "      <td>302.0</td>\n",
+       "      <td>140.0</td>\n",
+       "      <td>17.0</td>\n",
+       "      <td>ford torino</td>\n",
+       "      <td>USA</td>\n",
+       "      <td>3449</td>\n",
+       "      <td>1970-01-01</td>\n",
+       "    </tr>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "   Acceleration  Cylinders  Displacement  Horsepower  Miles_per_Gallon  \\\n",
+       "0          12.0          8         307.0       130.0              18.0   \n",
+       "1          11.5          8         350.0       165.0              15.0   \n",
+       "2          11.0          8         318.0       150.0              18.0   \n",
+       "3          12.0          8         304.0       150.0              16.0   \n",
+       "4          10.5          8         302.0       140.0              17.0   \n",
+       "\n",
+       "                        Name Origin  Weight_in_lbs        Year  \n",
+       "0  chevrolet chevelle malibu    USA           3504  1970-01-01  \n",
+       "1          buick skylark 320    USA           3693  1970-01-01  \n",
+       "2         plymouth satellite    USA           3436  1970-01-01  \n",
+       "3              amc rebel sst    USA           3433  1970-01-01  \n",
+       "4                ford torino    USA           3449  1970-01-01  "
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "df.head()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Compared to a table in a Markdown cell:\n",
+    "\n",
+    "\n",
+    "<table style=\"width:100%\">\n",
+    "    <thead>\n",
+    "  <tr>\n",
+    "    <th>Firstname</th>\n",
+    "    <th>Lastname</th> \n",
+    "    <th>Age</th>\n",
+    "  </tr>\n",
+    "  </thead>\n",
+    "  <tr>\n",
+    "    <td>Jill</td>\n",
+    "    <td>Smith</td> \n",
+    "    <td>50</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>Eve</td>\n",
+    "    <td>Jackson</td> \n",
+    "    <td>94</td>\n",
+    "  </tr>\n",
+    "</table>"
+   ]
   }
  ],
  "metadata": {

packages/rendermime/style/index.css

@@ -295,6 +295,7 @@ margin-top = 14, 14, 14, 14, 8, 8
 .jp-RenderedHTMLCommon table {
   border-collapse: collapse;
   border-spacing: 0;
+  border: none;
   color: var(--jp-ui-font-color1);
   font-size: 12px;
   table-layout: fixed;
@@ -310,7 +311,8 @@ margin-top = 14, 14, 14, 14, 8, 8
 
 
 .jp-RenderedHTMLCommon td,
-.jp-RenderedHTMLCommon th {
+.jp-RenderedHTMLCommon th,
+.jp-RenderedHTMLCommon tr {
   text-align: right;
   vertical-align: middle;
   padding: 0.5em 0.5em;