`
ssydxa219
  • 浏览: 633191 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

table表头固定

 
阅读更多

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表头列头固定</title>
<style>
body{font-size:12px;}
.t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
.t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
.t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
.t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
.dd{height:200px!important; height:208px; overflow-y:hidden;}

.t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
.t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
.ee{width:618px!important; width:620px}
.t_i_h table{width:600px;}
.t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
.cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}
.cc table{width:600px; }
.cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
</style>
<script>
function aa(){
var a=document.getElementById("cc").scrollTop;
var b=document.getElementById("cc").scrollLeft;
document.getElementById("dd").scrollTop=a;
document.getElementById("hh").scrollLeft=b;
}
</script>
</head>

<body>
<div class="t_n">
<span>序号</span>
<div class="dd" id="dd">
<table cellpadding="0" cellspacing="0" border="0" class="t_number">
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--table栏目-->
<div class="t_i">
<div class="t_i_h" id="hh">
<div class="ee">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="10%">栏目A</td>
<td width="20%">栏目B</td>
<td width="10%">栏目C</td>
<td width="20%">栏目D</td>
<td width="20%">栏目E</td>
<td width="20%">栏目F</td>
</tr>
</table>
</div>
</div>
<div class="cc" id="cc" onscroll="aa()">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="10%">1</td>
<td width="20%">1</td>
<td width="10%">1</td>
<td width="20%">1</td>
<td width="20%">1</td>
<td width="20%">1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</table>
</div>
</div>
</body>
</html>

 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

 

 

 

 

<!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>new document</title><META NAME="Generator" CONTENT="EditPlus,Microshaoft"><META NAME="Author" CONTENT="EditPlus,Microshaoft"><META NAME="Keywords" CONTENT="EditPlus,Microshaoft"><META NAME="Description" CONTENT="EditPlus,Microshaoft"><script type="text/javascript"
 src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript"><!--
    function FixTable(TableID, FixColumnNumber, width, height) {
    /// <summary>
    ///     锁定表头和列
    ///     <para> sorex.cnblogs.com </para>
    /// </summary>
    /// <param name="TableID" type="String">
    ///     要锁定的Table的ID
    /// </param>
    /// <param name="FixColumnNumber" type="Number">
    ///     要锁定列的个数
    /// </param>
    /// <param name="width" type="Number">
    ///     显示的宽度
    /// </param>
    /// <param name="height" type="Number">
    ///     显示的高度
    /// </param>
    if ($("#" + TableID + "_tableLayout").length != 0) {
        $("#" + TableID + "_tableLayout").before($("#" + TableID));
        $("#" + TableID + "_tableLayout").empty();
    }
    else {
        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
    }
    $('<div id="' + TableID + '_tableFix"></div>'
    + '<div id="' + TableID + '_tableHead"></div>'
    + '<div id="' + TableID + '_tableColumn"></div>'
    + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
    var oldtable = $("#" + TableID);
    var tableFixClone = oldtable.clone(true);
    tableFixClone.attr("id", TableID + "_tableFixClone");
    $("#" + TableID + "_tableFix").append(tableFixClone);
    var tableHeadClone = oldtable.clone(true);
    tableHeadClone.attr("id", TableID + "_tableHeadClone");
    $("#" + TableID + "_tableHead").append(tableHeadClone);
    var tableColumnClone = oldtable.clone(true);
    tableColumnClone.attr("id", TableID + "_tableColumnClone");
    $("#" + TableID + "_tableColumn").append(tableColumnClone);
    $("#" + TableID + "_tableData").append(oldtable);
    $("#" + TableID + "_tableLayout table").each(function () {
        $(this).css("margin", "0");
    });
    var HeadHeight = $("#" + TableID + "_tableHead thead").height();
    HeadHeight += 2;
    $("#" + TableID + "_tableHead").css("height", HeadHeight);
    $("#" + TableID + "_tableFix").css("height", HeadHeight);
    var ColumnsWidth = 0;
    var ColumnsNumber = 0;
    $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
        ColumnsWidth += $(this).outerWidth(true);
        ColumnsNumber++;
    });
    ColumnsWidth += 2;
    if ($.browser.msie) {
        switch ($.browser.version) {
            case "7.0":
                if (ColumnsNumber >= 3) ColumnsWidth--;
                break;
            case "8.0":
                if (ColumnsNumber >= 2) ColumnsWidth--;
                break;
        }
    }
    $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
    $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
    $("#" + TableID + "_tableData").scroll(function () {
        $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
        $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
    });
    $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
    $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
    $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
    $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
    if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
        $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
        $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
    }
    if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
        $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
        $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
    }
    $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}
$(document).ready(function () {
            FixTable("MyTable", 2, 600, 400);
        });
//-->
</script></head><body><table
  style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left- color: black"
  id="MyTable" border="1" cellspacing="0" cellpadding="0"><thead><tr><th style="text-align: center; width: 80px" rowspan="3">姓名</th><th style="text-align: center; width: 80px" rowspan="3">班级</th><th style="text-align: center" colspan="10">成绩</th></tr><tr><th style="text-align: center" colspan="3">主科</th><th style="text-align: center" colspan="3">文科</th><th style="text-align: center" colspan="3">理科</th><th style="text-align: center; width: 80px" rowspan="2">总分</th></tr><tr><th style="text-align: center; width: 80px">语文</th><th style="text-align: center; width: 80px">数学</th><th style="text-align: center; width: 80px">英语</th><th style="text-align: center; width: 80px">政治</th><th style="text-align: center; width: 80px">历史</th><th style="text-align: center; width: 80px">地理</th><th style="text-align: center; width: 80px">物理</th><th style="text-align: center; width: 80px">化学</th><th style="text-align: center; width: 80px">生物</th></tr><!--
        <tr>
        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            姓名
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            班级
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            语文
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            数学
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            英语
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            政治
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            历史
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            地理
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            物理
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            化学
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            生物
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            总分
                        </th>
                   
        </tr>
    --></thead><tbody><!-- 数据行 --><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>291111111111111111111111111111111111111111111111</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr></tbody></table></body></html>
分享到：
| 将OpenStack部署到Hadoop的四种方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html Table 表头固定的实现

    首先，我们需要为表头定义一个CSS类，比如这里的.table-head，然后为其设置固定的高度和背景颜色，确保它在视觉上与表格主体（.table-body）有所区分。重要的是，给这个表头添加一个合适的padding-right样式。这个...

    一个table表头固定，内容可滚动的实用例子

    一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能

    Html中Table表头固定内容滚动以及checkbox右对齐

    制作的样式中要求table表头固定，内容滚动，同时checkbox右对齐，支持全选

    基于jquery的table表头固定

    "基于jQuery的table表头固定"通常涉及到以下关键技术点： 1. **分离表头和主体**：首先，我们需要将HTML表格的thead部分与tbody部分分离，这样在进行滚动操作时，thead可以独立于tbody进行定位。 2. **CSS定位**：...

    移动端table固定表头与固定第一列

    总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。

    bootstrap-table表头固定（全局）

    标题“bootstrap-table表头固定（全局）”指的是如何在使用 Bootstrap Table 的整个应用或网站中实现表头始终固定在顶部的效果。 首先，我们需要引入 Bootstrap Table 的 CSS 和 JavaScript 文件。确保在 HTML 文档...

    css+jquery完美实现table表头固定显示(浮动)

    总的来说，结合CSS的`position: fixed`和jQuery的事件监听及样式调整，我们可以轻松实现table表头的固定显示，使用户在滚动查看大量数据时仍能清晰地看到列标题，提升交互体验。在实际开发中，这种技术广泛应用于...

    asp网页表头固定解决

    标题“asp网页表头固定解决”所指的就是如何在ASP.NET的GridView控件中实现表头固定的效果。这个效果对于提升用户体验非常重要，特别是在处理多列或者数据复杂度高的表格时，固定的表头可以让用户更容易理解数据的...

    table的表头固定

    在网页设计中，"table的表头固定"是一种常见的需求，尤其在展示大量数据时，保持表头在页面滚动时始终可见，可以帮助用户更好地理解数据列的含义。在这个场景下，我们通常会使用HTML的`&lt;table&gt;`元素来构建表格，并...

    实现Table表头和列固定

    在实现表头固定时，通常将表头部分通过CSS样式设置为`position: fixed`，并设定适当的宽度和高度，使其在页面滚动时始终保持在屏幕顶部。 针对“多表头”，这通常涉及到嵌套的`&lt;thead&gt;`元素。例如，一级表头在最...

    bootstrap表格固定表头并且tbody部分添加滚动条

    Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...

    固定table表头的插件

    为了解决这个问题，"固定table表头的插件"应运而生。这种插件能够保持表头在页面上的固定位置，无论用户如何滚动，表头始终可见，提高了用户的浏览体验。 在HTML中，实现固定表头通常需要CSS和JavaScript的配合。...

    table表头及列固定

    为了实现表头固定，我们通常会在CSS中设置`position: fixed`属性。但是，当涉及到列固定时，问题就变得复杂了，因为浏览器不支持原生的列固定功能。这时，jQuery库可以派上用场，提供更灵活的解决方案。 使用jQuery...

    table固定表头固定列源码

    table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器

    bootstrap-table实现表头固定以及列固定的方法示例

    首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery的库文件、Bootstrap的样式文件以及bootstrap-table自身的样式和脚本文件。如果需要实现列固定，还需要...

    HTML固定Table标题行的四种方法

    为解决这一问题，开发者通常采用JavaScript来实现Table标题行的固定，使其在滚动时始终保持可见。本文将详细介绍四种不同的JavaScript方法来实现HTML固定Table标题行。 1. **CSS Sticky Positioning** CSS3中的`...

Magicbox
Global site tag (gtag.js) - Google Analytics