相关疑难解决方法(0)

当用户使用jQuery将其滚出视图时,表头将保持固定在顶部

我正在尝试设计一个HTML表格,当用户将其滚出视图时,标题将保留在页面顶部.例如,该表可能距离页面500像素,如何使其成为如果用户将标题滚出视图(浏览器不再以某种方式检测到它在窗口视图中),它将保持在顶部？任何人都可以给我一个Javascript解决方案吗？

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

所以在上面的例子中,<thead>如果它不在视图中,我希望滚动页面.

重要提示:我不是在寻找<tbody>具有滚动条(溢出:自动)的解决方案.

html jquery html-table

作者

2018 05-24

136
推荐指数

10
解决办法

41万
查看次数

在纯css上具有固定标题和固定列的表

我需要创建一个带有固定标题和固定第一列的html表(或类似的东西).

到目前为止我看到的每个解决方案都使用Javascript或jQuery设置scrollTop/scrollLeft,但它在移动浏览器上无法顺利运行,所以我正在寻找一个纯CSS解决方案.

我在这里找到了一个固定列的解决方案:jsfiddle.net/C8Dtf/20/但我不知道如何增强它以使标题也得到修复.

我想让它在webkit浏览器上工作或使用一些css3功能,但我再说一遍,我不想Javascript用于滚动.

编辑:这是我想要实现的行为的示例:https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

html markup html-table css3 fixed-header-tables

pan*_*fil

2019 01-29

78
推荐指数

7
解决办法

17万
查看次数

如何在html表格上显示滚动条

我正在写一个页面,我需要一个html表来维持一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.

我希望它看起来像这个网址中的方法2:http://www.cssplay.co.uk/menu/tablescroll.html

我试过这样做但没有滚动条出现:

    <table border=1 id="qandatbl" align="center">
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    </tr>

   <tbody>
    <tr>
    <td class='qid'></td>
    <td class="options"></td>
    <td class="duration"></td>
    </tr>
    </tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

CSS:

tbody { 
    height:80em;  
    overflow:scroll;
                }

Run Code Online (Sandbox Code Playgroud)

html css scroll html-table overflow

Bru*_*dit

2017 08-13

72
推荐指数

5
解决办法

35万
查看次数

Jquery .on('scroll')在滚动时不触发事件

滚动时滚动事件未触发ul.我正在使用jQuery版本1.10.2.当我ul从ajax页面加载时,我无法使用$('ulId').on('scroll', function() {});或其他实时方法.请帮我找一个解决方案.

$(document).on( 'scroll', '#ulId', function(){
    console.log('Event Fired');
});

Run Code Online (Sandbox Code Playgroud)

jquery events scroll

ABH*_* SB

2014 11-24

65
推荐指数

3
解决办法

25万
查看次数

带有固定标题和固定列的HTML表格？

是否有CSS/JavaScript技术来显示一个长HTML表格,使列标题保持固定在屏幕上,第一个coloumn保持固定并滚动数据.

我希望能够滚动表格的内容,但始终能够看到顶部的列标题和左侧的第一列.

如果有一个jQuery插件会很棒!如果它有助于我唯一关心的浏览器是Firefox.

html javascript css html-table

koo*_*nmo

2013 12-11

58
推荐指数

2
解决办法

17万
查看次数

如何将滚动条添加到HTML5表？

我有一个HTML5表,我想添加一个滚动条.我希望表格显示十行,然后用户可以向下滚动以查看其他歌曲.如何添加滚动条？

这是我在HTML5中的表的代码:

<table id="my_table" table border="5">
  <tr>
    <th>URL</th>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
  <tr>
    <td>http://www.youtube.com/embed/evuSpI2Genw</td>
  </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

这是我的CSS代码:

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

css html5

Aar*_*ron

2013 09-13

44
推荐指数

4
解决办法

12万
查看次数

HTML固定标题表滚动条

可能重复:
带固定标题的HTML表格？

我已经尝试了几种方法从HTML表中获取带有固定标题的滚动条但没有运气.我想我需要一个解决方案,其中标题以某种方式"附加"到表体(而不是典型的嵌套表解决方案).我尝试的每个解决方案都会影响标题列和正文列的宽度.换句话说,它们不同步,并且标题的列与滚动表的列不正确对齐.标题和列的宽度因列而异.

有什么方法可以让我实现这个目标吗？我宁愿不使用JavaScript.哦,我也需要这个在Internet Explorer中工作.

更新:获得此功能对我来说非常重要.我需要在固定头两列和行头.到目前为止,还没有任何解决方我考虑使标题分开表,但滚动时这不起作用,因为标题将保持固定.

看起来固定的HTML标题会有很多用例,所以我很惊讶没有足够的解决方案.

(哦,我在链接中尝试了opatut建议的选项,但它并不适用于所有浏览器,我需要在Internet Explorer,Firefox和Chrome中使用此工作.如果它在Internet Explorer 6中不起作用,那就没问题) .

哦,如果我必须修复列宽或行高,那也没关系,我会很高兴有一个有效的固定标题HTML表(跨浏览器).

html scroll html-table

aeq*_*aeq

2017 06-07

23
推荐指数

3
解决办法

7万
查看次数

如何创建包含colspans的固定表头行？

我有一个从数据库数据创建的大型动态表.我需要列标题行保持固定并滚动必要的行.

我在网上试过很多脚本试图让它正常工作.我想在浏览器上保持简单易用,因为一些目标计算机相当蹩脚.

这是我正在使用的:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Sample</title>
  </head>

  <body>
    <br><br><br><br>

    <table id="A" border="0" width="95%" cellspacing="0" cellpadding="0" align="center" class="base">
      <tr bgcolor='gray'>
        <td>
          <br><br><br>
          need the blue column heading rows to remain fixed, and scroll the green rows:<br>

    <table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base">
      <thead>

        <tr>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
          <th width="75px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
          <th width="100px" style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 2</th> …

Run Code Online (Sandbox Code Playgroud)

javascript css jquery html-table

KM.*_*KM.

2018 09-07

20
推荐指数

4
解决办法

2万
查看次数

位置:粘滞按钮在IE 11中不起作用

我需要使包含按钮的div变粘,以便当用户滚动屏幕时,该div中的按钮将保持在底部.

这样,用户无需一直向下滚动以单击按钮.

包含按钮的div一直在这里:

<div class="form-group sticky-button-thing-not-working-on-ie">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Save" class="btn btn-default" />
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

.sticky-button-thing-not-working-on-ie {
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>


    <div class="container body-content">
      <h2>Edit</h2>
      <form action="/Movies/Edit/3" method="post">
        <input name="__RequestVerificationToken" type="hidden" value="kBoJXRfdKTYn4uw8fXl3V_yNVa_xD1s0vyepuNLJLxC3InZ-jA1R4b9EjFDO3SGMMp6T7E91m_wy9vGzm4Z0WUm1_8vljyrKMz6frJcQBqY1" />
        <div class="form-horizontal">
          <h4>Movie</h4>
          <hr />

          <input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="3" />

          <div class="form-group"> …

Run Code Online (Sandbox Code Playgroud)

html css css-position css3 internet-explorer-11

Tx3*_*x36

2019 01-29

16
推荐指数

4
解决办法

5万
查看次数