Избегайте обертывания элементов в trth в Firefox

Question

Span внутри div падает до следующей строки, div вложен внутри the tr tr, в Firefox. Как этого избежать? Код работает в Chrome и IE.

Мой Html

<table> 
    <thead> 
     <tr> 
      <th><div>2016<span >span</span></div></th> 
      <th><div>2017<span class="ui-icon ui-icon-carat-2-n-s"></span></div></th> 
      <th><div>2018<span class="ui-icon ui-icon-carat-2-n-s"></span></div></th> 
     </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
</tbody> 
</table> 

Мой Css

table thead tr th { 
    text-align:right; 
    white-space:nowrap; 
} 
table thead tr th div span { 
    display:block; 
    float:right; 
} 

см в jsFiddle

Answer 1

Снимите пролетом из этой группы.

Попробуйте это.

table thead tr th div { 
    display:block; 
    float:right; 
} 

Demo Here

Answer 2

Попробуйте так: Demo

table thead tr th div+span{ 
    display:block; 
    float:right; 
} 

Для получения дополнительной информации ознакомьтесь здесь Link