Почему-то tr располагает элементы по вертикали вместо стандартного поведения по горизонтали

td,th { text-align: right; width: 2rem; }

<table id="table" border="1">
  <caption>Таблица умножения</caption>
  <tr>
    <th>&nbsp;</th><th>1</th><th>2</th><th>3</th><th>4</th>
    <th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
  </tr>
  <tr>
    <th>1</th><td>1</td><td>2</td><td>3</td><td>4</td>
    <td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
  </tr>
  <tr>
    <th>2</th><td>2</td><td>4</td><td>6</td><td>8</td>
    <td>10</td><td>12</td><td>14</td><td>16</td><td>18</td>
  </tr>
  <tr>
    <th>3</th><td>3</td><td>6</td><td>9</td><td>12</td>
    <td>15</td><td>18</td><td>21</td><td>24</td><td>27</td>
  </tr>
  <tr>
    <th>4</th><td>4</td><td>8</td><td>12</td><td>16</td>
    <td>20</td><td>24</td><td>28</td><td>32</td><td>36</td>
  </tr>
  <tr>
    <th>5</th><td>5</td><td>10</td><td>15</td><td>20</td>
    <td>25</td><td>30</td><td>35</td><td>40</td><td>45</td>
  </tr>
  <tr>
    <th>6</th><td>6</td><td>12</td><td>18</td><td>24</td>
    <td>30</td><td>36</td><td>42</td><td>48</td><td>54</td>
  </tr>
  <tr>
    <th>7</th><td>7</td><td>14</td><td>21</td><td>28</td>
    <td>35</td><td>42</td><td>49</td><td>56</td><td>63</td>
  </tr>
  <tr>
    <th>8</th><td>8</td><td>16</td><td>24</td><td>32</td>
    <td>40</td><td>48</td><td>56</td><td>64</td><td>72</td>
  </tr>
  <tr>
    <th>9</th><td>9</td><td>18</td><td>27</td><td>36</td>
    <td>45</td><td>54</td><td>63</td><td>72</td><td>81</td>
  </tr>
</table>