美文网首页
table表头固定

table表头固定

作者: Albert_d37d | 来源:发表于2021-07-20 14:48 被阅读0次

//jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'account.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">   

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script src="competition/statistics.js"></script>

<style>

.tb1_table{

    table-layout: fixed;

    border-collapse: collapse;

}

.tb1_table thead {

  background: #EFAD4D;

  width:100%;

}

.dv_table{

  overflow: auto;

}

.tb2_table td {

  text-align: left;

  width: 200px;

}

</style>

  </head>

  <body>

    <div class="container-fluid right">

    <div class="row">

    <div class="col-md-12">

    <ul class="breadcrumb">

    <li><a href="#" id="title"></a></li>

    <li class="active" id="item"></li>

</ul>

    </div>

    </div>

    <hr>

    <div class="row">

    <div class="col-md-12">

    <div class="well well-sm">

    <form class="form-horizontal" role="form">

  <div class="form-group">

    <label class="col-md-2 control-label">开始日期</label>

    <div class="col-md-2">

      <input class="form-control" type="date" id="id_beginDate"/>

    </div>

    <label class="col-md-2 control-label">结束日期</label>

    <div class="col-md-2">

      <input class="form-control" type="date" id="id_endDate"/>

    </div>

    <div class="col-md-2">

    <button class="btn btn-default">查询</button>

    </div>

  </div> 

</form>

    </div>

    </div>

    </div>

    <div class="row">

    <div class="col-md-12">

<table class="tb1_table">

  <thead>

    <tr>

      <th>Col 1</th>

      <th>Col 2</th>

      <th>Col 3</th>

      <th>Col 4</th>

      <th>Col 5</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>

        <div class="dv_table">

          <table class="tb2_table table table-striped table-hover table-condensed">

            <tbody>

              <tr>

                <td>row 1-1</td>

                <td>row 1-2</td>

                <td>row 1-3</td>

                <td>row 1-4</td>

                <td>row 1-5</td>

              </tr>

              <tr>

                <td>row 2-1</td>

                <td>row 2-2</td>

                <td>row 2-3</td>

                <td>row 2-4</td>

                <td>row 2-5</td>

              </tr>

              <tr>

                <td>row 3-1</td>

                <td>row 3-2</td>

                <td>row 3-3</td>

                <td>row 3-4</td>

                <td>row 3-5</td>

              </tr>

              <tr>

                <td>row 4-1</td>

                <td>row 4-2</td>

                <td>row 4-3</td>

                <td>row 4-4</td>

                <td>row 4-5</td>

              </tr>

              <tr>

                <td>row 5-1</td>

                <td>row 5-2</td>

                <td>row 5-3</td>

                <td>row 5-4</td>

                <td>row 5-5</td>

              </tr>

              <tr>

                <td>row 6-1</td>

                <td>row 6-2</td>

                <td>row 6-3</td>

                <td>row 6-4</td>

                <td>row 6-5</td>

              </tr>

              <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr>

              <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr> <tr>

                <td>row 7-1</td>

                <td>row 7-2</td>

                <td>row 7-3</td>

                <td>row 7-4</td>

                <td>row 7-5</td>

              </tr>

            </tbody>

          </table>

        </div>

      </td>

    </tr>

  </tbody>

</table>

    </div>

    </div>

  </body>

</html>

//js

$(function(){

Start();

function Start()

{

InitInterface();

}

function InitInterface()

{

var w = $("#right").width() - 20;

var h = $("#right").height() - 400;

$(".tb1_table").css("width",w);

$(".dv_table").css("width",w);

$(".dv_table").css("height",h);

}

});

相关文章

  • table表头固定

    //jsp <%@ page language="java" import="java.util.*" pageE...

  • TABLE表头固定问题

    由于表格内容td是动态生成的,宽度不固定,所以通过定位的方式来实现表头固定会使表头脱离文档流,跟td内容不对齐,通...

  • jquery固定table表头

    在我们日常 大前端开发中,查看报表的时候,表格内容过长,这时候就可能会有需求:固定表头查看内容。 下面是解决办法 ...

  • table固定表头和列

    表格固定表头和列 背景 在项目中大多数的表格,都是使用ui库提供的表格,ui库提供的表格为我们封装了很多很实用的功...

  • 造轮子遇到的的技术难题

    table 做固定表头的技术难题 尝试用css解决,overflow: auto会使整个table滚动,考虑加在t...

  • ElementUi开发问题记录

    Table 表格固定表头却无法自适应高度 Message 消息提示--渲染页面后消失

  • JS/jQuery Table固定表头代码

  • table实现表头固定,仅用css

    仅仅使用css实现的表头固定使用中会很受限制,但是如果要求不高使用起来也并没有什么大问题,主要是分别在两个div中...

  • 自定义table 表头固定

    通过css3新属性position:sticky实现表头固定内容滚动(表格外用div包裹给div一个高度) htm...

  • React Table 固定列、固定表头的实现

    这几天在研究如何实现表格的固定列(fixed column)功能,这里记录了思路和细节。表格控件比较复杂,应用场景...

网友评论

      本文标题:table表头固定

      本文链接:https://www.haomeiwen.com/subject/hutrmltx.html