相关疑难解决方法(0)

我正在编写一个页面,我需要一个HTML表来维护一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.想想一个迷你版的excel.这似乎是一项简单的任务,但我在网上找到的几乎所有解决方案都有一些缺点.我怎么解决这个问题？

我知道这个问题,但没有一个答案适用于Safari,Chrome等.

接受的策略(如此处所示)是设置tbody高度和溢出属性,如下所示:

<table>
    <thead>
        <tr><th>This is the header and doesn't scroll</th></tr>
    </thead>
    <tbody style="height:100px; overflow:auto;">
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
    </tbody>
</table>

不幸的是,这在任何webkit浏览器中都不起作用.有一个关于它的错误报告似乎不是一个高优先级(据报道,05年6月).

所以我的问题是:是否有其他策略确实有效？我尝试过双表方法,但是不可能保证标题与内容对齐.我只需要等待Webkit修复它吗？

我希望尽可能轻松地完成任何其他库.

在我很长的桌子中,我想在<tbody>标签上添加一个滚动条,以便头部始终可见但不起作用.你能帮忙吗？

小提琴:http://jsfiddle.net/Hpx4L/

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody style="overflow-y:scroll; height:100px;"> <!-- wont work -->
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td> …

我想在垂直滚动时修复（冻结）gridview标头。

我也想在水平滚动时修复第一列。

我想要在chrome和IE中都使用。

我有一个大约300行12列的大桌子.通过页面翻页滚动表格时<thead>,默认情况下不显示内容.我想在滚动"内部"时看到它<tbody>.也就是说,如果屏幕顶部以一行开头,我希望首先显示标题.否则它应该像常规表一样.

到目前为止我看到的常见解决方案是创建一个可以自行滚动的表(因此与页面滚动无关).也就是说,这个问题的答案表明了什么.

但是如果跨越屏幕有很多列,这不是很实用,特别是因为现在有两个独立的滚动条.在移动设备上,第二个滚动条带走了大量宝贵的空间.使用它也很烦人.你不能简单地"翻身",但你必须集中精力去击中那个小小的滚动条.在其他浏览器上,您可以滚动触摸其中的数据,但一旦您移出外部,另一个恼人的运动发生...

有一个干净的CSS方式来做到这一点？

我在这里有一个申请:申请

在申请中请执行以下操作:

1. 您将在左侧看到一个绿色加号按钮,单击它,它将打开一个模态窗口.

2. 在模态窗口的搜索栏中键入短语single并提交搜索.表格如下所示.

3. 通过单击"添加"按钮从表中添加一行,它将在顶部控件中添加信息.

4. 最后点击"添加问题"按钮,这将在下面附加一个表格行.

现在我遇到的问题是,列中<thead>的列与列中的列<tbody>不匹配.我的问题是如何让这些列匹配？

HTML代码如下所示:

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $td = $("<td class='extratd'>");
    var $plusrow = $("<td class='plusrow'></td>");
    var $qid = $("<td class='qid'></td>").text(qnum);
    var $question = $("<td class='question'></td>");
    var $noofanswers = $("<div class='noofanswers'>2. Number of Answers:<br/></div>");
    var $options = $("<div class='option'>1. Option Type:<br/></div>");
    var $answer = $("<div class='answer'>3. Answer:<br/></div>");
    var $replies = $("<td class='noofreplies'><div class='wrapper'></div></td>");
    var $weight = $("<td class='weight'></td>");
    var …