相关疑难解决方法(0)

如何创建具有固定/冻结左列和可滚动主体的HTML表？

我需要一个简单的解决方案 我知道它与其他一些问题类似,例如:

• 带有固定标题和固定列的HTML表格？
• 滚动时如何锁定表格的第一行和第一列,可能使用JavaScript和CSS？

但我只需要一个左栏就可以冻结,我更喜欢一个简单且无脚本的解决方案.

是否有跨浏览器的CSS/JavaScript技术来显示长HTML表格,使列标题保持固定在屏幕上,不要与表格主体一起滚动.想想Microsoft Excel中的"冻结窗格"效果.

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

我需要创建一个带有固定标题和固定第一列的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表格？

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

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

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

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

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

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

我需要在网站上的表格中显示一堆数据作为报告的一部分.问题是它有很多,它需要在视觉上分组.

每条数据都是项目的"用法",并且具有日期(表示何时使用),商店编号(对应于使用它的商店),项目名称(使用的项目),以及数量(使用的项目数量).

用户可以选择按项目分组,然后存储或按商店,然后是项目.在幕后,我也会按日期分组.

报告需要按项目/商店(取决于分组选项)和日期以及总和的总和来计算数量.

问题是,我不确定如何显示它.我现在能想到的最好的就像是

                           ++------+------+------+------++-----+
                           || date | date | date | date || sum |
+-----------+--------------||======+======+======+======||=====+---+
| Item Name | Store Number ||  1   |  2   |  3   |  4   ||  10 | ^ |
|           +--------------||------+------+------+------||-----|---|
|           | Store Number ||  5   |  6   |  7   |  8   ||  26 | # |
|           +--------------||------+------+------+------||-----| # |
|           | Store Number ||  9   |  10  |  11  |  12  ||  42 | # |
|           +--------------||------+------+------+------||-----|   | …

我div有财产

<div id="_body_container" style="height: 500px; overflow-x: auto; overflow-y: auto; ">
</div>`

在这个div中我有table哪个类views-table,这个表有100%的宽度,这使得它的父div:_body_containerscrollable.I想要修复此表的第一列和第二列粘贴在他们的位置,同时左右滚动事件发生_body_container

结构如下:

我正在尝试为我们数据库中的数据创建一个顶部带有固定标题的表。当我添加“位置：固定；” 到标题的 css 它将它保持在顶部，但它强制整个标题到第一列。如何让表格标题位于顶部并与列正确对齐？如果可能，我更喜欢 css/html 解决方案。

编辑：我已经尝试了很多我在 SO 上和通过谷歌找到的 jQuery 解决方案。有些工作，有些没有。当我将它与我在我的页面上运行的其他脚本结合起来时，那些独立工作的人往往会崩溃......

<style>
  .dg_hdr_row{
  position: fixed;
  top:0;
  height: 25px;
  }

  .dg_col1{ width:60%; border: 1px solid #000; padding: 5px;}
  .dg_col2{ width:15%; border: 1px solid #000; padding: 5px;}
  .dg_col3{ width:10%; border: 1px solid #000; padding: 5px;}
  .dg_col4{ width:15%; border: 1px solid #000; padding: 5px;}

</style>

<table width="100%">

 <thead width="100%" >
  <tr width="100%" class="dg_hdr_row" >
   <th width="60%">Column 1</th>
   <th width="15%">Column 2</th>
   <th width="10%">Column 3</th>
   <th width="15%">Column 4</th>
  </tr>
 </thead>

    <tbody>
        <tr class="dg_row">
            <td class="dg_col1"></td> …