내 머리글과 동일한 줄에 내 CSS 화살표를 유지하는 데 어려움이 있습니다.

Question

Chrome과 Firefox에서이 사실을 발견했습니다. 내 테이블의 머리글 열에 CSS 화살표가 있습니다. 그러나 작은 화면 너비에서 화살표는 다음 줄로갑니다 display:inline-block

작은 화면 너비에서도 같은 줄에 화살표를 유지하는 방법은 무엇입니까?

.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>

Fiddle

Answer 1

시도 .headerRow 클래스에 white-space: nowrap;를 추가.