无法将我的CSS箭头保持在与标题相同的行上

Question

我在Chrome和Firefox上都注意到了这一点。我有一个CSS箭头，我放在我的表的标题列中。但是，在屏幕宽度较小的情况下，尽管display:inline-block

，箭头仍会转到下一行

即使屏幕宽度较小，如何将箭头保持在同一条线上？

Fiddle

.arrow-up:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f00;
}

<table>
  <tr class="headerRow">
    <th class="headerRow arrow-up">
      Header
    </th>
  </tr>
</table>

Answer 1

尝试将white-space: nowrap;添加到.headerRow类。