我有一个大的可滚动表,我用Twitter引导构建,但是希望防止第一列滚动.这可能吗？
<div class="row">
<div class="span12" style="height: auto !important;overflow-x: scroll;">';
<table class="table table-striped table-bordered table-condensed">
<thead>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
</div>
</div>
解决方法
这是一个可能的解决方案的演示,基于我以前的评论：
DEMO: Fixed Column on Bootstrap Table
请注意,这并不是真正的测试,甚至是一个完整的解决方案来修复一个列,而是一个概念的证明,以供你建立.
这是相关的标记.此示例使用条带化,边界浓缩的Bootstrap表
<div id="scroller">
<table class="table table-striped table-bordered table-condensed">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
和所需的jQuery：
$('#scroller table').each(function(){
var table = $(this),fixedCol = table.clone(true),fixedWidth = table.find('th').eq(0).width(),tablePos = table.position();
// Remove all but the first column from the cloned table
fixedCol.find('th').not(':eq(0)').remove();
fixedCol.find('tbody tr').each(function(){
$(this).find('td').not(':eq(0)').remove();
});
// Set positioning so that cloned table overlays
// first column of original table
fixedCol.addClass('fixedCol');
fixedCol.css({
left: tablePos.left,top: tablePos.top
});
// Match column width with that of original table
fixedCol.find('th,td').css('width',fixedWidth+'px');
$('#scroller').append(fixedCol);
});
和所需的CSS：
#scroller {
width: 300px;
overflow-x: scroll;
}
#scroller table {
/* just a quick hack to make the table overflow the containing div
your method may differ */
width: 600px;
}
#scroller .table.fixedCol {
width: auto;
position: absolute;
/* below styles are specific for borderd Bootstrap tables
to remove rounded corners on cloned table */
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.table.fixedCol th,.table.fixedCol td {
/* background is set to white to hide underlaying column
of original table */
background: white;
}
