javascript - 我的表格标题分为两行文本，我不明白为什么

Question

好吧，我正在尝试制作我的第一个网站，当我的网站切换到某个哈希值时，我会弹出一个表格。然而，当这个表格弹出时，标题被强制放在两行不同的文本上，而不是看起来像 Forward-Tilt它看起来像 Forward，然后在单独的一行上显示 tilt。
到目前为止，我已经尝试更改边距和填充，但我无法让文本显示在一行中。

#damagetablemario {
   display:none;
   width:80%;
   position:relative;
   top:300px;
   left:200px;
   border: 1px solid black;
   border-collapse:collapse;
 }

th {
   padding:30px;
   text-align:center;
   border: 1px solid black;
   border-collapse:collapse;
}
td {
   padding:20px;
   text-align:center;
   border: 1px solid black;
   border-collapse:collapse;
}


<table id = "damagetablemario">
   <tr>
      <th>Neutral</th>
      <th>Forward  Tilt</th>
      <th>Up Tilt</th>
      <th>Down-Tilt</th>
      <th>Forward-Smash</th>
      <th>Up-Smash</th>
      <th>Down-Smash</th>
      <th>Neutral-Air</th>
      <th>Forward-Air</th>
      <th>Back-Air</th>
      <th>Up-Air</th>
      <th>Down-Air</th> 
   </tr>
   <tr>
      <td class = "Neutral">10%</td>
      <td class = "Forward-Tilt"></td>
      <td class = "Up-Tilt"></td>
      <td class = "Down-Tilt"></td>
      <td class = "Forward-Smash"></td>
      <td class = "Up-Smash"></td>
      <td class = "Down-Smash"></td>
      <td class = "Neutral-Air"></td>
      <td class = "Forward-Air"></td>
      <td class = "Back-Air"></td>
      <td class = "Up-Air"></td>
      <td class = "Down-Air"></td>
   </tr>
</table>

目前它看起来像 https://gyazo.com/ea7ca8c3070d6f1a426c71272be9b386但我希望它们都在一行中，例如 https://gyazo.com/f8f2a14b0464b1ab6f98d41e3e995abb这个。

Answer 1

要强制标题保持在一行中，您可以使用 white-space: nowrap; css property和值(value)。

这是您使用此属性的示例。

#damagetablemario {
   width:80%;
   position:relative;
   top:300px;
   left:200px;
   border: 1px solid black;
   border-collapse:collapse;
 }

th {
   padding:30px;
   text-align:center;
   border: 1px solid black;
   border-collapse:collapse;
   white-space: nowrap;
}

td {
   padding:20px;
   text-align:center;
   border: 1px solid black;
   border-collapse:collapse;
}

<table id = "damagetablemario">
   <tr>
      <th>Neutral</th>
      <th>Forward  Tilt</th>
      <th>Up Tilt</th>
      <th>Down-Tilt</th>
      <th>Forward-Smash</th>
      <th>Up-Smash</th>
      <th>Down-Smash</th>
      <th>Neutral-Air</th>
      <th>Forward-Air</th>
      <th>Back-Air</th>
      <th>Up-Air</th>
      <th>Down-Air</th> 
   </tr>
   <tr>
      <td class = "Neutral">10%</td>
      <td class = "Forward-Tilt"></td>
      <td class = "Up-Tilt"></td>
      <td class = "Down-Tilt"></td>
      <td class = "Forward-Smash"></td>
      <td class = "Up-Smash"></td>
      <td class = "Down-Smash"></td>
      <td class = "Neutral-Air"></td>
      <td class = "Forward-Air"></td>
      <td class = "Back-Air"></td>
      <td class = "Up-Air"></td>
      <td class = "Down-Air"></td>
   </tr>
</table>