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
Post a Comment