相关疑难解决方法(0)

我希望能够"调整"HTML表格的演示文稿以添加单个功能:当向下滚动页面以使表格在屏幕上但标题行在屏幕外时,我希望标题保持不变在观察区域的顶部可见.

这在概念上类似于Excel中的"冻结窗格"功能.但是,HTML页面中可能包含多个表,我只希望它发生在当前处于视图中的表中,只有在它处于视图中时才会发生.

注意:我已经看到一种解决方案,其中表数据区域可滚动而标题不滚动.这不是我正在寻找的解决方案.

我知道这个问题,但没有一个答案适用于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修复它吗？

我正在尝试设计一个有一些表格的页面.似乎样式表比应该是更痛苦.

问题如下.桌子应该有一个固定的高度,并且当底部太少时,显示底部的空白区域 - 或者当内容太少时显示空白 - 或者显示垂直滚动条.除此之外,表格有一个不应滚动的标题.

据我所知,thead不滚动是表的默认行为.拉伸tfoot可以很好地填充白色空间.可悲的是,似乎我可以放在桌子高度上的每一个约束都被高兴地忽略了.我试过了

table {
    height: 600px;
    overflow: scroll;
}

我试过了max-height.我试图绝对定位表并给出顶部和底部坐标.我试图在Firebug中手动编辑高度,看看它是否与CSS特异性有关.我也尝试过设置高度tbody.事实上,无论我的努力如何,表格的内容始终保持高水平.

当然我可以伪造一个带有div结构的表,但它实际上是一个表,我担心使用div我可能遇到一些问题,其中一些列可能没有正确对齐.

我怎么能给桌子一个高度？

我想要一个带右侧滚动条的表格.
我想用css完成这个没有任何插件(jQuery).
表头应该保持固定.

为了让这个工作,我需要做什么？

正如Firefox 4更新日志中所提到的,将不再支持可滚动<tbody>的.

有一堆变通办法 --javascript或2个单独的表 - 但它们都没有解决所有问题.Javascript显然较慢(600行你可以忘记尝试滚动表格),2个表格的单元格宽度会有问题.

你知道是否有一些很酷的方法来做到这一点？我们正在使用jsf/facelets,现在必须重做标签,从一个好主意开始会很棒:-)

在我的项目中,我试图tbody在IE8中制作滚动.我知道它可以通过只给被滚动overflow: auto到tbody.但这在IE8中不起作用.为了使其在IE8工作,tbody必须给予position: absolute(或float: left双方thead和tbody).如果我做的overflow: auto工作,那么我分配到的宽度th和td百分比被忽略.这又不让tr占据全宽thead和tbody.因此,tr和tbody/ 之间存在刺激的空间thead.

请在IE8中测试此演示.(在firefox和chrome中工作正常)

这是小提琴中的代码.

以下是我无法改变的严格要点

• 宽度为td且th必须为百分比.
• 我无法更改HTML标记
• 必须使用CSS解决它.

实际上,我确实用一个脏修复来解决它,如下所示

th:after,td:after{ /* only to the last column, first occurence */
    content: "...................................................";
    visibility: hidden;
}

也可以通过在开发人员工具中为特定的td/th提供许多点来检查上述代码

上面的代码看起来不错,但我需要将:after伪选择器仅提供给第一行的最后一列th和tr.如果我给每一个 …

在标题中,有谁知道如何在ASP.NET中冻结GridView头？

我有一个带有JSON数据的HTML表，在其中我试图动态地使tbody与Fix标头垂直滚动

我试图使tbody垂直滚动，以便用户只能在单个页面中看到数据。

我做了什么

var data = [{
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR",
    "gross": 274659,
    "discount": 297,
    "GST": 16479,
    "amount": 290954
  },
  {
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM",
    "gross": 55185,
    "discount": 0,
    "GST": 3074,
    "amount": 58281
  },
  {
    "billdate": "2018-08-01",
    "outlet": "KOLAR",
    "gross": 62513,
    "discount": 0,
    "GST": 3306,
    "amount": 65880
  },
  {
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR",
    "gross": 279509,
    "discount": 68,
    "GST": 16582,
    "amount": 296125
  },
  {
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM",
    "gross": 53462,
    "discount": 0,
    "GST": 3064,
    "amount": 56545
  },
  {
    "billdate": "2018-08-02",
    "outlet": …

我有以下表结构:

<table>   
<thead>   
    <tr>   
        <th colspan="4">Current</th>   
        <th colspan="4">New/Requested</th>   
    </tr>   
    <tr>   
        <th nowrap="nowrap">RSD &nbsp;&nbsp;&nbsp;&nbsp;</th>  
        <th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Open QTY &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">CRD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;&nbsp;</th>  
        <th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Open QTY &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Action</th>   
        <th nowrap="nowrap">Reason</th>   
        <th nowrap="nowrap">Action Code Status </th>   
    </tr> 
    <tbody>
        <tr>
            <td></td>  
            <td></td>   
            .....plenty of rows
        </tr>
    </tbody>
</thead>   
</table> 

我正在尝试修复标题,以便如果我向下滚动它仍然可见.我查看了这篇文章,但无法理解.我怎样才能做到这一点？

Richard JP Le Guen在创建滚动html表时给了我很多帮助.唯一的问题是我不希望表标题与表行一起滚动.现在它在他的例子中使用span工作但是如果我在我的表中使用它它真的弄乱了我的表标题.我已经过了最后2个小时尝试对它进行排序,但我没有这样,所以我刚刚离开了桌面标题.

那么问题是,还有另一种方法可以使用css来确保在向下滚动表格时无法滚动表格标题吗？

下面是我的html和css代码:

    <div id="tableWrapper">
    <div id="tableScroll">
    <table border=1 id="qandatbl" align="center">
    <thead>
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    <th class="col2">Weight(%)</th>
    <th class="col1">Answer</th>
    <th class="col2">Video</th>
    <th class="col1">Audio</th>
    <th class="col2">Image</th>
    </tr>
    </thead>
    <tbody>
        <tr>
    <td class="qid"><?php echo $i; ?></td>
    <td class="options"></td>
    <td class="duration"></td>
    <td class="weight"></td>
    <td class="answer"></td>
    <td class="video"></td>
    <td class="audio"></td>
    <td class="image"></td>
    </tr>
    </tbody>
</table>
</div>
</div>

            #qandatbl{
                font-size:12px;
                border-collapse:collapse;
                margin:0px;
                text-align:center;
                margin-left:auto; 
                margin-right:auto;
                border:1px solid black;
            }
            .col1{
            background-color:#FCF6CF;   
            }
            .col2{
            background-color:#FEFEF2;   
            }   
                .options{ …

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

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

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

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