bootstrap表头固定

css:

//表头固定

.fixed_headers thead tr {

    display: block;    position: relative;}.fixed_headers tbody {    display: block;    overflow: auto;    height: 250px;}//每列宽度

.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {

    min-width: 250px;    text-overflow:ellipsis;    white-space:nowrap;    overflow:hidden;}.fixed_headers td:nth-child(2),.fixed_headers th:nth-child(2) {    min-width: 200px;}.fixed_headers td:nth-child(3),.fixed_headers th:nth-child(3) {    min-width: 200px;}.fixed_headers td:nth-child(4),.fixed_headers th:nth-child(4) {    min-width: 200px;}.fixed_headers td:nth-child(5),.fixed_headers th:nth-child(5) {    min-width: 200px;}.fixed_headers td:nth-child(6),.fixed_headers th:nth-child(6) {    min-width: 200px;}.fixed_headers td:nth-child(7),.fixed_headers th:nth-child(7) {    min-width: 200px;}.fixed_headers td:nth-child(8),.fixed_headers th:nth-child(8) {    min-width: 200px;}

html:
<table class="table  table-hover coma-base-table fixed_headers">    <thead>    <tr style="white-space: nowrap">        <th  style="font-weight: bold;">被参控公司</th>        <th  style="font-weight: bold;">参控关系</th>        <th  style="font-weight: bold;">直接持股比例</th>    </tr>    </thead>    <tbody>         ..........    </tbody></table>


时间: 2024-10-09 11:30:13

bootstrap表头固定的相关文章

html bootstrap 表头固定在顶部,表列 可以自由滚动的效果

该效果主要是依照 bootstrap 的一个样式,class="navbar-fixed-top"; 参考网址为:http://v3.bootcss.com/components/#navbar-fixed-top 贴上代码. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

css手写一个表头固定

Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要遇到的个问题就是固定以后数据表格与表头的对齐问题,也看了很多我文章试下来都不怎么成功,只好自己一点点试 表头固定的一般思路是布两个table,一个放表头,一个放表格体,然后将表格体加上高度height以及overflow-y <div class="content"> <

表头固定内容可滚动表格的3种实现方法

有时候,我们在开发前端页面过程中,可能会用到这种表格:表头固定不动,表格内容(<tbody>)需要竖直滚动. 像这样的: 还有这样的: 通过研究,我大致总结了以下三种实现办法供大家参考,如果有错误之处敬请指正,也欢迎拍砖!! 一.表格总宽度自动,每列宽度设置统一用<colgroup>设置 这种实现方法最简单,只需要用两个表格,一个表格作为表头,另一个表格用<div>包裹并设置该<div>的高度固定,高度溢出可滚动即可.两个表格的列宽用相同的<colgr

css表头固定样式的方法

这篇文章主要为大家介绍了css表头固定样式的方法,涉及样式的相关操作技巧,需要的朋友可以参考下 本文实例讲述了css表头固定样式的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <style type="text/css">/*表头样式*/.scll {position: relative;top: expression(this.offsetParent.scrollTop);//background: url(../img/tab_15.gif)

IE,表头固定

<html>  <head>   <title>表头固定</title>    <style type="text/css">    /*表头样式*/    .scll {     position: relative;     top: expression(this.offsetParent.scrollTop);     background-color: #BCF4EC;     text-align: center;

前端基础学习-CSS表头固定

纯CSS实现表头固定之所以难,主要在两点.一是占有最大市场份额的IE6不支持position:fixed.另一个,是人们想破头都想在一起表格中实现这种效果.不过外国真的人用纯CSS实现了这种效果,动用了数量惊人的CSS hacks--我觉得,如果搞到代码如此难懂且难扩展,还不如用javascript好了.碰巧今天我也遇到这种需求,换个视角想想,真的搞出来了. 我们知道,CSS是负责表现,HTML是负责结构,同样的结构,换个样式,给人的感觉完全不同,这也说明人的眼睛是很容易受骗.因此前些狂热鼓吹D

bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里 那么在较小的视口(viewport)时,则能够通过滑动来查看整条数据,从而能保证总体页面的协调性. 刚才说了,数据列比較多,且第一列是后面数据的全部者,那么观察者在看数据的时候肯定是要相应着数据全部者来看的.那么问题来了 若是滑动到

表头固定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

table表头固定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>固定表格表头</title> <meta http-equiv="X-UA-Compatible" content="IE=7