HTML固定标题表滚动条

Question

HTML固定标题表滚动条

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

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

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

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

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

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

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

Answer 1

Mir*_*zer 11

我有一个纯CSS解决方案的解决方案,并允许表是正常和可变宽度.这是一个新的解决方案,根据标题的设计有一些问题.好消息是,如果您的标题是左对齐的,或者您的列是固定宽度的,那么应该没问题.在IE6中有一些视觉错误,我发现一些单元格需要一个最小宽度来保持标题显示列中的内容是否比标题更宽.所有问题都是可视的,所以如果看起来不错,你就完成了.表体是完全正常的,因为没有JavaScript,所以如果用户重新调整页面大小,则不必执行任何操作.

查看我的解决方案并给我发表评论 http://salzerdesign.com/blog/?p=191

Answer 2

bpe*_*n76 5

我知道你正在努力避免使用Javascript,但我和你在同一条船上(在新应用程序的确切挑战中苦苦思索几天)并且在我找到Datatables后大约10分钟就解决了这个问题:

解决方案的工作示例:http: //www.datatables.net/examples/basic_init/scroll_y.html

它每次都会在宽度方面完全匹配标题和正文列.宽度可以指定,但它也足够智能自动调整大小.默认情况下,使用提供的示例CSS支持列突出显示和排序.切换到分页模型(我最终使用的)是一行代码.并且......最好的部分 - 如果您担心您的用户可能没有打开Javascript,它会完全降级到符合标准的HTML表格.恕我直言,这是最不痛苦,功能最丰富的解决方案,完全支持IE.

如果它让你感觉更好,我在政府(军事)网站和国际银行的网站上都使用了这个解决方案....这两个都是我遇到过的最苛刻和最严格的客户......两者都是对结果非常满意.

Answer 3

Joh*_*her 2

我的第一个答案并没有尝试修复标题和列。这是一个适用于所有典型浏览器的示例（但可能需要一些调整）。

<!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></title>
</head>
<body>

  <style>
    th { text-align: center; border: 1px solid black; padding:3px; }
    td { text-align: center; border: 1px solid black; padding:3px; }
    th.c1, td.c1 { width: 100px; }
    th.c2, td.c2 { width: 150px; }
    th.c3, td.c3 { width: 60px; }
    th.c4, td.c4 { width: 100px; }
    th.c5, td.c5 { width: 150px; }
    th.c6, td.c6 { width: 60px; }

    #rowScroll { height: 100px; } /* Subtract the scrollbar height */
    #contentScroll { height: 100px; width: 300px; }
    #colScroll { width: 272px; } /* Subtract the scrollbar width */
  </style>

    <table cellspacing="0" cellpadding="0" style="float: left;" style="width:300px; height:100px;" >
      <tr>
        <td id="void" style="border: 0;">
        </td>
        <td id="rowHeaders" style="border: 0;">
          <div id="colScroll" style="overflow-x:hidden;">
            <table cellspacing="0" cellpadding="0" style="width: 600px;">
              <tr>
                <th class="c1">A</th>
                <th class="c2">B</th>
                <th class="c3">C</th>
                <th class="c4">D</th>
                <th class="c5">E</th>
                <th class="c6">F</th>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <tr>
        <td id="colHeaders" style="border: 0;">
          <div id="rowScroll" style="overflow-y:hidden">
            <table cellspacing="0" cellpadding="0">
              <tr><td>R1</td></tr>
              <tr><td>R2</td></tr>
              <tr><td>R3</td></tr>
              <tr><td>R4</td></tr>
              <tr><td>R5</td></tr>
              <tr><td>R6</td></tr>
              <tr><td>R7</td></tr>
              <tr><td>R8</td></tr>
              <tr><td>R9</td></tr>
            </table>
          </div>
        </td>
        <td id="content" style="border: 0;">
          <div id="contentScroll" style="overflow:auto">
            <table cellspacing="0" cellpadding="0" style="width: 600px;">
              <tr><td class="c1">A1</td><td class="c2">B1</td><td class="c3">C1</td><td class="c4">D1</td><td class="c5">E1</td><td class="c6">F1</td></tr>
              <tr><td class="c1">A2</td><td class="c2">B2</td><td class="c3">C2</td><td class="c4">D2</td><td class="c5">E2</td><td class="c6">F2</td></tr>
              <tr><td class="c1">A3</td><td class="c2">B3</td><td class="c3">C3</td><td class="c4">D3</td><td class="c5">E3</td><td class="c6">F3</td></tr>
              <tr><td class="c1">A4</td><td class="c2">B4</td><td class="c3">C4</td><td class="c4">D4</td><td class="c5">E4</td><td class="c6">F4</td></tr>
              <tr><td class="c1">A5</td><td class="c2">B5</td><td class="c3">C5</td><td class="c4">D5</td><td class="c5">E5</td><td class="c6">F5</td></tr>
              <tr><td class="c1">A6</td><td class="c2">B6</td><td class="c3">C6</td><td class="c4">D6</td><td class="c5">E6</td><td class="c6">F6</td></tr>
              <tr><td class="c1">A7</td><td class="c2">B7</td><td class="c3">C7</td><td class="c4">D7</td><td class="c5">E7</td><td class="c6">F7</td></tr>
              <tr><td class="c1">A8</td><td class="c2">B8</td><td class="c3">C8</td><td class="c4">D8</td><td class="c5">E8</td><td class="c6">F8</td></tr>
              <tr><td class="c1">A9</td><td class="c2">B9</td><td class="c3">C9</td><td class="c4">D9</td><td class="c5">E9</td><td class="c6">F9</td></tr>
            </table>
          </div>
        </td>
      </tr>
    </table>

  <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    var content = $("#contentScroll");
    var headers = $("#colScroll");
    var rows = $("#rowScroll");
    content.scroll(function () {
      headers.scrollLeft(content.scrollLeft());
      rows.scrollTop(content.scrollTop());
    });
  </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，1 月前
查看次数：	67025 次
最近记录：	8 年，3 月前