html - Bootstrap table make displaying element in TR not expand -


i built table knockout , bootstrap display anime entries. it's sortable clicking column name. when however, cell expands accommodate arrow after display: inline display: none. how change css arrow displayed on cell doesn't expand it?

demo here: http://animelistmvc.apphb.com/animelist/explore

html:

<div class = "table-responsive">              <table class="table table-striped table-bordered table-condensed ko-grid" cellspacing="0">                   <thead>                       <tr data-bind="foreach: columns" class="disableselection">                            <th>                             <!-- $parent header required inside foreach loop -->                            <a id="headertitle" data-bind="text: headertext, click: $parent.sorttable"></a>                            <span data-bind="attr: { class: $parent.currentcolumn() == headertext ? 'isvisible' : 'ishidden' }">                            <i data-bind="attr: { class: $parent.icontype }"></i>                            </th>                       </tr>                   </thead>                   <tbody data-bind="foreach:itemsoncurrentpage">                   <tr data-bind="foreach: $parent.columns">                             <!-- ko if: rowid-->                                 <td><a data-bind="attr: { href: rowaction + '/' + $parent[rowid]}"><span data-bind="text: typeof rowtext == 'function' ? rowtext($parent) : $parent[rowtext] "></a></td>                             <!--/ko-->                             <!-- ko if: rowtext && !rowid-->                                 <td><span data-bind="text: typeof rowtext == 'function' ? rowtext($parent) : $parent[rowtext] "></span></td>                             <!--/ko-->                             <!-- ko if: rowimage-->                                 <td align="center"><img width="100" height="100" data-bind="attr:{src: $parent[rowimage]}" /></td>                             <!--/ko-->                   </tr>                   </tbody>              </table>            </div> 

css:

.isvisible {     display: inline;     float: right; }  .ishidden {     display: none; }  #headertitle {     cursor: pointer; }  .disableselection {     -ms-user-select: none; /* ie 10+ */     -moz-user-select: -moz-none;     -khtml-user-select: none;     -webkit-user-select: none;     user-select: none; } 

if arrow's css positioning absolute, document not account space in flow. make th contains position:relative , set css isvisible arrow to

  position: absolute;   right: 10px;   float: none; 

season taste.


Comments

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

Magento/PHP - Get phones on all members in a customer group -

session - Logging Out Using PHP -