相关疑难解决方法(0)

我在表格中有15列.我想滚动水平和垂直,当我滚动垂直时,标题应该是固定的.我尝试过各种各样的例子,但没有运气.我看到的所有标题列都没有与数据对齐.列宽度不固定,因为列数根据用户选择而变化

请引导我到正确的例子.

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

寻找创建具有可滚动主体和静态/固定标头的表的解决方案.

搜索周围似乎产生了许多片状代码,要么不在IE中工作,需要大量的Javascript和调整,要么是愚蠢的CSS hacks等.

说实话,如果是CSS hacks或Javascript的情况,我想我更喜欢使用Javascript选项.

我猜的另一种选择是将它全部放在一个div中,然后只滚动整个表格 - 但这有点不对劲:D

我同时需要固定标题和固定列.

我希望有一个固定的标题(第一行和第一列)和一个在给定时间显示的可滚动表.

• 左边包含标题列
• 一个包含标题行和表的右侧

IMP点:

• 数据水平移动时:固定标题(第一行将相应移动)
• 当数据垂直移动时:固定列(第一列将相应移动)

这将允许我在没有标题列移动的情况下滚动横向,并且在没有标题行移动的情况下滚动(通过在其父节点中的某些绝对定位,我猜？).

PS:我搜索了很多,但我能找到的是,只有固定的标题或固定的第一列.我想要一次两个.这里是包含固定列的小提琴,请帮我添加固定标题(第一行).

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

Html代码:

<div class="table-container">
    <div class="headcol">
        <table>
            <thead>
                <th>Room</th>
            </thead>
            <tbody>
                <tr>
                    <td>Fooname</td>
                </tr>
                <tr>
                    <td>Barname</td>
                </tr>
                <tr>
                    <td>Barfoo</td>
                </tr>
                <tr>
                    <td>Zorzor</td>
                </tr>
                <tr>
                    <td>Lorname Ipsname</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="right">
        <table>
            <thead>
                <th>8-10</th>
                <th>10-12</th>
                <th>12-14</th>
                <th>14-16</th>
                <th>16-18</th>
                <th>18-20</th>
            </thead>
            <tbody>
                <tr>
                    <td class="cell booked">Already booked</td>
                    <td class="cell available">Available for booking</td>
                    <td class="cell booked">Already booked</td>
                    <td class="cell booked">Already booked</td>
                    <td class="cell available">Available for booking</td>
                    <td class="cell …

我环顾四周，似乎无法锁定 mediawiki 表的第一行。我所说的冻结，就像锁定电子表格的顶行一样。当您创建包含大量行的表时，这似乎是一个非常理想的功能，因此用户不必滚动到顶部即可查看列名称。

有谁知道一种方法来锁定表格的标题行，这样即使您滚动到长表格的底部，它也会浮动在那里？

我正在使用HTML表并已应用垂直滚动,现在我想在滚动期间冻结标题行.我怎样才能做到这一点？

由于有些不可避免的原因(许多遗留代码,兼容性,设计需求),我有以下问题:我有两个表,一个直接在另一个之下,但在两个帧之间分割(请参阅我的信号下面的伪示例.) .我需要这些表的列宽完全同步,以便这两个表'行为'像一个.原因是有一个'标题'表不会滚动到可以滚动的'数据'表之上.

现在有一些明显的建议没有(尚)起作用.

首先,我听说通过使用CSS,有一种方法可以将滚动条放在表行上,而不是表头,这是此处的预期效果.不幸的是,由于上述原因,这不是一个可行的选择.

其次,列上的百分比宽度格式.不幸的是,滚动条会搞砸了,这个解决方案也会遇到下一个可能的解决方案的问题:像素宽度格式化.这里,如果列内容超宽,则这些宽度(px或%)将在一个表中被覆盖而在另一个表中不被覆盖,并且一个不匹配的宽度将断开 - 所有垂直对齐.显然用CSS'max-width'来纠正这个似乎不起作用.

最终可能的解决方案是使用某种Javascript和DOM来动态强制解决问题.这里强制每列上的最小宽度并强制底部宽度覆盖顶部宽度就足够了.实际上,将表分成两个同时使它们共享相同的列/行模型的能力将非常简洁.希望这个解决方案是可行的,而不是非常复杂(原谅我目前缺乏知识RE Javascript/DOM).

谢谢,

斯科伦

<!-- In frame 1 (top, non-scrolling): -->
<table id="t1" ...> (Just the header, really)
  <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
  </tr>
</table>

<!-- In frame 2 (bottom, scrolling): -->
<!-- table "t2" intended to have equal column widths -->
<table id="t2" ...> (Data below the header)
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
   <td>...</td><td>...</td><td>...</td><td>...</td>
  </tr>
</table>

演示

<div id="divScroll" style="overflow-x: hidden">
    <table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">

            <tr>
                <td class="csstextheader" width="70px"></td>
                <td class="csstextheader" width="70px">
                    <b>Time Slot&nbsp;</b>
                </td>
                <td><b>Room 7</b></td>
                <td><b>Room 8</b></td>
                <td><b>Room 9</b></td>
                <td><b>Room 10</b></td>
            </tr>



            <tr class="csstablelisttd">
                <td width="70px">08:00AM</td>
                <td>00</td>
                <td class="csstdred">John</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>                                     
            </tr>
    </table>
</div>

在窗口上调用onload

function resolutionIndependent()
        {
            var height;
            var tableMain;
            var divScroll;

            if (document.body && document.body.offsetWidth)
            {
                height = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth)
            {
                height = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight)
            { …

看这个演示

我正在使用这里提供的fixedheadertable插件

由于某些原因,我的示例表不滚动,我做错了什么？

初始化在javascript代码的底部完成:

$("#fixed").fixedHeaderTable();
$("#fixed").fixedHeaderTable("show");

我有以下问题:当我从表中翻译标题单元格并将表格设置为border-collapse:collapse时,单元格将被移动但不会移动它们的边框.我创建了一个测试:

标记:

<table>
    <thead>
        <th>Test 1</th>
        <th>Test 2</th>
        <th>Test 3</th>
    </thead>
    <tbody>
        <tr>
            <td>asdasd</td>
            <td>adasdasd</td>
            <td>adasdasd</td>
        </tr>
    </tbody>
</table>

样式:

table{
    border-spacing: 0;
    border-collapse: collapse;
    background: #efefef;
}

th {
    background:#ccc;
    border-right: 1px #000 solid;
    transform: translate(-10px, 0);
}

http://jsfiddle.net/rs0h9tbu/2

如果我将border-collapse更改为separat,一切正常.这是一个错误,还是任何人都可以解释这种行为？

我有一个带有标题和正文的表格,我希望表格标题在主体上滚动时保持固定.

该表设置如下:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>

        ...more rows for data...

    </tbody>

该表用一个封装,并具有CSS,如:

overflow-x: hidden;
overflow-y: auto;
height: 400px;

我需要表头保持完全静止,但当我添加position:fixed; 对于thead或个人而言,标题会被压扁.

这是最好的方法吗？

由于针对此主题提供的其他解决方案（我也想避免使用jQuery这样的解决方案：stackoverflow）不适用于我的情况，因此我提出了一个新问题。如何使表格标题固定在垂直滚动上？

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class=container>
  <div class=row>
    <div class=col-sm-12>
      <div class="table-responsive">
        <table class="table table-condensed table-bordered table-hover fixed_headers">
          <thead>
            <tr>
              <th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th>
              <th rowspan="2">ID</th>
              <th rowspan="2">Name</th>
              <th colspan="4">r 1</th>
              <th colspan="4">r 2</th>
              <th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK
              </th>
              <th rowspan="2">ERW
              </th>
              <th rowspan="2"><span class="text-muted">Radar</span></th>
              <th rowspan="2"><span class="text-muted">RISS</span></th>
            </tr>
            <tr>
              <th>
                A 1
              </th>
              <th>
                A 2
              </th>
              <th>
                A 3
              </th>
              <th>
                A 4
              </th>
              <th>
                A …

我从一个朋友那里得到了这个当前的实现。该项目有一个GridView，如下图

<div ID="divGrid" runat="server">
<asp:GridView ID="docGrid" runat="server" AutoGenerateColumns="False" GridLines="None"
    DataSourceID="pagedDatasetSourceControl" OnRowDataBound="docGrid_RowDataBound" OnSelectedIndexChanging="docGrid_SelectedIndexChanging" DataKeyNames="ID"
    CssClass="gridTable" AllowSorting="True" AllowPaging="True" meta:resourcekey="docGridResource1">
    <PagerSettings Visible="false"></PagerSettings>
    <Columns>
        ..................
    </Columns>
    <RowStyle CssClass="tableRow"></RowStyle>
    <PagerStyle VerticalAlign="Bottom" HorizontalAlign="Right"></PagerStyle>
    <AlternatingRowStyle CssClass="tableRowAlt"></AlternatingRowStyle>
</asp:GridView>
</div>

现在，使用此 GridView 的不止一 (1) 个 .cs 类，那么每个实现都不同。然后.cs 类的“ONE”实现了如下所示的“滚动”。

this.divGrid.Attributes.Add("class", "fleft scroll");
this.divGrid.Attributes.Add("style", "width:100%; height:250px;");

但是上面的代码也会滚动标题，所以当我向下滚动时，标题也会滚动。有没有办法通过在我的 .cs 文件中为此类添加“属性”来解决此问题。

谢谢