我用 knockout 和 bootstrap 构建了一个表来显示动漫条目。可以通过单击列名对其进行排序。但是,当您这样做时,单元格会扩展以容纳 i display: inline from display: none 后的箭头。如何更改 CSS,使箭头显示在单元格上但不会展开?
此处演示: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 is required inside a 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;
}
最佳答案
如果箭头的 CSS 定位是绝对的,文档将不会占其在流中的空间。使包含它的 th
position:relative
并将 isVisible 箭头的 css 设置为
position: absolute;
right: 10px;
float: none;
调味。
关于html - Bootstrap 表使 TR 中的显示元素不展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30632353/