好吧,我正在尝试制作我的第一个网站,当我的网站切换到某个哈希值时,我会弹出一个表格。然而,当这个表格弹出时,标题被强制放在两行不同的文本上,而不是看起来像 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这个。
最佳答案
要强制标题保持在一行中,您可以使用 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>
关于javascript - 我的表格标题分为两行文本,我不明白为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54059568/