如何固定响应式 Bootstrap 3 表中的第一列？

固定响应式 Bootstrap 3 表格中的第一列

增强表格的响应能力对于移动网页设计至关重要，尤其是在屏幕有限的情况下房地产使得有必要优先考虑特定内容。在这种情况下，可能需要确保表格的第一列保持固定，以便轻松访问基本信息。

实现此目标的一个有效解决方案是利用 JavaScript 和 CSS。通过创建第一列的克隆并应用绝对定位，我们可以允许表格的其余部分水平滚动，而克隆的列保持不变。此技术可确保无论滚动如何，通常包含表标题等关键信息的初始列仍然可见。

jQuery 实现

将 JavaScript 代码封装在 $( function(){...}) 块，确保 DOM 加载时正确执行。创建现有表的 jQuery 克隆，将其插入到原始表之前，并为其分配自定义类“fixed-column”以将其分开。

<code class="javascript">$(function(){
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
});</code>

将克隆列的行高度调整为与原始表格匹配。

<code class="javascript">$fixedColumn.find('tr').each(function(i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
});</code>

CSS 样式

定义 CSS 样式以绝对定位克隆的列，设置其宽度并应用适当的边框和背景颜色。利用媒体查询隐藏视口大小超过 768 像素的克隆列，确保在大屏幕上实现最佳显示。

<code class="css">.table-responsive > .fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}  </code>

<code class="css">@media(min-width:768px) {
    .table-responsive > .fixed-column {
        display: none;
    }
}</code>

真实世界应用

下面提供的随附演示展示了该技术的实际应用，即使在移动设备上水平滚动表格的其余部分，也能有效地修复第一列。

结论

以下组合jQuery 和 CSS 可以固定 Bootstrap 3 响应式表格中的第一列，确保无论设备方向如何，关键内容都保持可见。通过克隆第一个

以上是如何固定响应式 Bootstrap 3 表中的第一列？的详细内容。更多信息请关注PHP中文网其他相关文章！