精华内容
下载资源
问答
  • 解决思路:鼠标进入存放table的div页面滚动条消失,table滚动条滚动,离开页面滚动条出现 <template> <div class="content"> <div class="table" @mouseover="tableHover" @mouseout="tableOut">...

    解决思路:鼠标进入存放table的div页面滚动条消失,table滚动条滚动,离开页面滚动条出现

    <template>
      <div class="content">
        <div class="table" @mouseover="tableHover" @mouseout="tableOut">
          <!-- table -->
        </div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        //鼠标滑过事件
        tableHover() {
          let dom = document.querySelector(".box"); //出现滚动条的div
          let child = document.querySelector(".content"); //显示内容的div
          dom.style.height = "100vh";
          /**
           * 17px滚动条的宽度,padding的原因因为使用了rem布局,滚动条的显示隐藏会造成页面的宽度缩放
           */
          child.style.paddingRight = "17px";
          dom.style["overflow-y"] = "hidden";
        },
        //鼠标离开事件
        tableOut() {
          let dom = document.querySelector(".box");
          let child = document.querySelector(".content");
          dom.style.height = "unset";
          child.style.paddingRight = "0px";
          dom.style["overflow-y"] = "auto";
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    </style>
    

    希望有更好解决办法的朋友可以分享一下。

    展开全文
  • 固定表头#table-container {border: 1px solid black;width: 316px;}table {width: 300px;}.table-header {padding-left: 10px;color: #0099FF;font-size: 1.3rem;height: 40px;text-align: center;}.table col {...
    固定表头

    #table-container {

    border: 1px solid black;

    width: 316px;

    }

    table {

    width: 300px;

    }

    .table-header {

    padding-left: 10px;

    color: #0099FF;

    font-size: 1.3rem;

    height: 40px;

    text-align: center;

    }

    .table col {

    width: 25%;

    }

    .table-body {

    height: 200px;

    overflow-y: scroll;

    overflow-x: hidden;

    }

    .table-body td {

    padding-left: 15px;

    }

    contentcontentcontentcontent
    contentcontentcontentcontent
    contentcontentcontentcontent
    contentcontentcontentcontent
    contentcontentcontentcontent
    contentcontentcontentcontent
    contentcontentcontentcontent
    contentcontentcontentcontent
    contentcontentcontentcontent

    一键复制

    编辑

    Web IDE

    原始数据

    按行查看

    历史

    展开全文
  • ASP.net表头显示表头滚动条

    ASP.net表头显示表头、滚动条


    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    1、表头和内容的样式:
            .gridview_header
            {
                height: 24px;
                width: 98.65%;
                overflow-x: hidden;
                overflow-y: hidden;
            }
            .gridview_content
            {
                height: 110px;
                width: 100%;
            }
            .gridview_rowStyle
            {
                border: 1px solid #bd7b7b;
                text-align: center;
            }
            .gridview_itemStyle
            {
                border: 1px solid #bd7b7b;
                text-align: center;
            }
    2、js事件:
        <script language="javascript" type="text/javascript">
            $(function () {
                $(".gridview_content").scroll(function () {
                    $(".gridview_header").scrollLeft($(".gridview_content").scrollLeft());
                });
            });
        </script>
    3、后台绑定信息:
    private void SetData()
            {
                #region
                DataTable dt = new DataTable();
                dt.Columns.Add("ROWNO");
                dt.Columns.Add("ROWSTATENAME");
                dt.Columns.Add("NETPOINTNAME");
                for (int i = 0; i < 20; i++)
                {
                    DataRow dr = dt.NewRow();
                    dr["ROWNO"] = i.ToString();
                    dr["ROWSTATENAME"] = "有效";
                    dr["NETPOINTNAME"] = "深圳";
                    dt.Rows.Add(dr);
                }
                this.gridView.DataSource = dt;
                this.gridView.DataBind();
                this.gridView1.DataSource = dt;
                this.gridView1.DataBind();
                #endregion
            }
    4、界面代码:

        <div class="gridview_header">
            <table cellspacing="2" cellpadding="2" rules="all" border="1" id="GvGoods_sum_head"
                style="width: 2000px; height: 100%; border-collapse: collapse;">
                <tr align="left" style="background-color: #FCB5AF; height: 100%">
                    <th scope="col" align="center" style="width: 1.5%;">
                        明细号
                    </th>
                    <th scope="col" style="width: 2%;">
                        明细状态
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                    <th scope="col" style="width: 4%;">
                        网点名称
                    </th>
                </tr>
            </table>
        </div>
        <div class="gridview_content" style="overflow-x: scroll; overflow-y: scroll;">
            <asp:GridView ID="gridView" runat="server" AllowPaging="True" PageSize="100" AutoGenerateColumns="false"
                Width="2000px" rules="all" border="1" ShowHeader="false" CellSpacing="2" CellPadding="2">
                <Columns>
                    <asp:BoundField DataField="ROWNO" HeaderText="明细号" ItemStyle-HorizontalAlign="Center"
                        HeaderStyle-Width="1.5%">
                        <ItemStyle HorizontalAlign="Center" Wrap="true" CssClass="gridview_itemStyle" Width="1.5%"
                            VerticalAlign="Middle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="ROWSTATENAME" HeaderText="明细状态" HeaderStyle-Width="2%">
                        <ItemStyle HorizontalAlign="Center" Width="2%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField DataField="NETPOINTNAME" HeaderText="网点名称" HeaderStyle-Width="6%">
                        <ItemStyle HorizontalAlign="Center" Width="4%" CssClass="gridview_itemStyle"></ItemStyle>
                    </asp:BoundField>
                </Columns>
                <HeaderStyle CssClass="gridview_itemStyle" />
                <RowStyle CssClass="gridview_rowStyle" Wrap="true" />
                <PagerSettings Visible="False" />
                <HeaderStyle HorizontalAlign="Center" BackColor="#FCB5AF" />
            </asp:GridView>
        </div>

    展开全文
  • ant table 组件的滚动条样式不太好看 考虑调整一下 而且表头 和x轴还出现滚动条滚动条样式: 去掉表头滚动条 .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: hidden; height...

    ant table 组件的滚动条样式不太好看 考虑调整一下 而且表头 和x轴还出现了滚动条
    原滚动条样式:
    在这里插入图片描述

    1. 去掉表头的滚动条
    .ant-table-fixed-header .ant-table-scroll .ant-table-header {
          overflow: hidden;
          height: 70px;
        }
    
    1. 去掉x轴的滚动条就比较容易了 直接设置table的scroll(不设置x即可):
    scroll={{y: 350}}
    
    1. 修改滚动条的样式:
    .ant-table-body{
          &::-webkit-scrollbar {
            height: 5px;
            width: 10px;
            overflow-y: auto;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(89, 89, 89, 0.2);
            background: #939392;
          }
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: 0;
            border-radius: 0;
            background: #f0f2f5;
          }
        }
    

    效果:
    在这里插入图片描述
    这个是借鉴大佬的 附上链接:
    https://blog.csdn.net/jane_96/article/details/82906068

    展开全文
  • 项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,在ie6中已测试通过,需要的朋友可以参考下
  • 效果为:整个grid数据会出现横向,竖向滚动条。其中所有的表头:操作,序号,测试1.。。。等等要素,不会随着竖向滚动条的滚动而发生下移动的变化。而“操作”,“序号”,“测试1”,“测试2”,“测试3”,“测试4...
  • 1.所需文件fixed_table_rc.csssortable_table.jsfixed_table_rc.js2.表格样式&lt;table id="fixed" class="detailTable tableValuation taskTable" &gt; &...border:no.
  • 固定表头滚动条的HTML表格 商场本月销售统计表 商品名 上旬 中旬 下旬   洗洁精 2321 4521 1203 洗洁精 ...
  • table内容出现滚动条表头对齐
  • 1 <! DOCTYPE html > 2 ...固定表头 ...1.一共有三个div....里面的两个div分别裹住表头和表内容。... (b) “overflow-y:scroll” 让滚动条出现; 更多专业前端知识,请上 【猿2048】www.mk2048.com
  • shi'yong使用 使用table组件,不分页,设置scroll 回导致表头出现滚动条样式 ,如下图所示 此时 ,页面渲染的表格标签如下 ... 之所以出现滚动条,是因为加了overflow: scroll, 所以,可以使用以下样式覆盖行内...
  • 润乾报表在页面端展现时,可生成滚动条锁定表头,通过拖拽滚动条查看相应数据,客户在使用时通常是将报表集成到自己的页面中,这样就要求生成滚动条的样式要和客户的显示风格保持一致,需要能定义润乾所生成的滚动条...
  • c# gridview 滚动条固定表头 IE已测试 c# gridview 滚动条固定表头 IE已测试 c# gridview 滚动条固定表头 IE已测试
  • Element-UI的表格滚动条样式顶部表头出现一条白边。请问怎么进行解决 没滚动条时背景颜色正常。出现滚动条会造成顶部出现一个白边。请问怎么进行解决这个问题?
  • 润乾V4 润乾报表 锁定表头 滚动条样式
  • 问题:confluence 表格,如何使表头不随滚动条滚动而滚动? 解决:confluence 创建表格时选择默认的带表头的表格,好处:支持按列排序,表头不随滚动条滚动而滚动;完美解决表格太长,拖动问题 看下效果: 1....
  • 表头、表尾固定,表格内容超出一定高度会出现滚动条;思路是弄三个table,头、内容、尾各占一个,内容用滚动的盒子包裹,头和尾也可以用div包裹
  • HTML table表格 固定表头 tbody加滚动条

    千次阅读 2019-12-31 18:00:02
    由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应的字段名,影响体验效果! 实现思路: 将内容要滚动的区域控制...
  • 使用bootstrap编写的动态表格【当滚动纵向的滚动条时,表格的表头处于悬浮状态,表格的内容滚动;当滚动横向的滚动条时,表格的表头和表格的内容对应着一起滚动】
  • 先上一张图看下 最终效果: 上代码 <!-- Table head --> <table class="table tableHead"> <thead> <tr> <th id="changeName" style="width: 169px;...th style
  • 在做项目时,有时候我们会经常遇到用table来显示数据,但是要求表头不动,表主体超过高度则出现滚动条,这样就要用上下两个table来分开显示表头和数据,但是必须两个table的对应列都设置成相同的宽度百分比例才能...
  • 工作中或许会用到 table 表格固定表头, tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。今天研究了一下,整理了几种方案:有的建议使用:position: absolute 或者 position: fixed;.tablethead{...
  • 出现滚动条时,划到右边就会出现这个问题,求解决办法!谢谢大家![face]qq:54.gif[/face] 之前网上看到很多用 body .el-table th.gutter { display: table-cell!important; } 但是并没有用
  • 纯CSS实现表头固定表格滚动条效果,所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,021
精华内容 4,408
关键字:

表头出现滚动条