相关疑难解决方法(0)

我正在尝试使用bootstrap 3表创建一个具有固定标头和可滚动内容的表.不幸的是,我发现的解决方案不适用于bootstrap或搞乱风格.

这里有一个简单的bootstrap表,但由于某些原因我不知道tbody的高度不是10px.

height: 10px !important; overflow: scroll;

例:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

是否有CSS/JavaScript技术来显示一个长HTML表格,使列标题保持固定在屏幕上,第一个coloumn保持固定并滚动数据.

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

如果有一个jQuery插件会很棒!如果它有助于我唯一关心的浏览器是Firefox.

我一直试图想办法用一个固定的第一列制作一个表(并且表的其余部分有一个水平溢出)我看到一个帖子有一个类似的问题.但固定列位似乎没有得到解决.救命？

当您激活"冻结窗格"时,如何创建一个锁定第一行和第一列的表(如在Excel中)？我需要表格水平和垂直滚动(存在很多解决方案,但只允许垂直滚动).

因此,当您向下滚动表格时,第一行将保持不变,因为它将具有列标题.thead无论是什么使得解决方案变得更容易,这可能最终都会出现,或者可能不会出现.

向右滚动时,第一列保持不变,因为它保存行的标签.

我很确定单独使用CSS是不可能的,但有人能指出我的JavaScript解决方案吗？它需要在所有主流浏览器中工作.

我一直在网上搜索制作带有固定(冻结)列和标题的表的方法.好像我终于找到了解决方案并根据我的需要进行了修改.

有原来的小提琴是在这里.

这是我修改过的解决方案.我在Chrome(版本:55.0.2883.87 m)和Firefox(版本:51.0.1)中测试了它.

问题是它在IE中不完全有效(版本:11.0.9600.18427).在水平滚动期间,标题的冻结部分也会滚动.有人可以帮助我让它在IE中工作吗？还有一个问题:这种方法可以安全使用吗？我的意思是如果它使用一些未指定的行为,那么一些未来的浏览器甚至一些现代浏览器可能以错误的方式显示我的表,并且最好使用具有几个不同表的安全解决方案并同步滚动位置和行高度. UPD:还有一个问题:如何在移动设备上保持稳定？

以下是一些演示该方法的代码:

$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
  	/*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain 			it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", …

如何使用现代CSS制作尽可能少的JavaScript表格？

我想要的功能是:

• 固定柱(定位和宽度)
• 可在X和Y轴上滚动
• 在X轴上响应(对于非固定宽度的列).

注意:我确实看到并分析了SO中一些最受欢迎/最常见的问题和答案,例如此处和此处.

我知道这可以通过JavaScript事件处理程序进行滚动,以便可以向下/向上移动固定列以跟随主列.我试图构建的功能(但是大量编写脚本)的一个例子可能是这样的.我们还可以将MutationObserver父元素添加到表中以检测大小更改并再次计算表的大小.但这在性能上是昂贵的,而且由于CSS也在不断发展和现代化,我想知道是否有新方法......

是否有2017/2018解决方案,只有CSS或尽可能少的JS开销？

我想避免必须实现像这样容易破解的JavaScript解决方案:

我的想法:

a):position: fixed;在固定列中使用

问题:

• <td> 元素高度必须由JavaScript定义或计算.
• 需要一个滚动事件监听器,我们需要以编程方式滚动固定列

b):使用div(s)来"伪造"左列,并在表格中包含可滚动内容

问题:

• div高度必须与表行高度同步
• HTML语义丢失,因为固定的"假"列不再是表格语法

c):使用N表只显示每个部分,所以我可以有HTML标记但保留固定的标题/列.

问题:

• 重复HTML x N.
• 必须同步大小并使用JavaScript滚动

使用滚动事件监听器和固定的左列,我们可以像这样使用JavaScript:

const firstColumn = [...document.querySelectorAll('table tr > *:first-of-type')];
const tableContainer = document.querySelector('.table-container');
tableContainer.addEventListener('scroll', function() {
    const currentScrollPosition = this.scrollTop * -1;
	firstColumn.forEach(el => el.style.marginTop = currentScrollPosition + 'px');
});

.table-container {
    width: 600px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: …

我现在正在创建一个站点,我需要为<pre>带有语法高亮和行号的标签提供支持(我正在使用GitHub Gists,但这没关系).

问题是,我的网站响应,我不能指定一个静态width属性我 <pre>的<td>,因为表可以调整.

如果你想看一个实例,这里是我创建的例子,向你展示我在说什么:http://jsfiddle.net/akashivskyy/jNRrn/.

如果你不想搬到任何地方,这里有一个简短的解释......

我的基本树看起来像这样:

<div class="file">
    <table class="source">
        <tr>
            <td class="lines">
                <span class="line-number">1</span>
                <span class="line-number">2</span>
                <span class="line-number">3</span>
            </td>
            <td class="code">
<pre>NSString *title = @"Title";
NSString *title2 = [title stringByAppendingString:@"This is a very very long string"];
NSLog(@"%@", title2);</pre>
            </td>
        </tr>
    </table>
</div>

而且很基本的CSS:

.file {
    overflow: hidden;
    width:340px;
}

td.code pre {
    overflow: auto;
}

这不起作用,因为<pre>没有width财产.我设法以某种方式允许滚动的唯一方法是申请overflow: auto我的.file …

我正在尝试创建一个HTML表格,其高度有限,左侧保持固定,同时水平滚动(表体可水平滚动)但在垂直滚动时不固定(左侧将可滚动与表的其余部分).

fixed    scrollable
  1     body content
  2     body content
  3     body content
  4     body content
  .          .
  .          .
  .          .

然而,我找到了这个解决方案,它只解决了水平滚动问题.在Eamon Nerbonne jsFiddle示例中,向height: 150px;div 添加一个将演示我正在尝试解决的错误.

我想找到一个只涉及HTML和CSS的解决方案.

这个带有一个绝对定位列的简单表在Firefox(和IE)中的呈现方式与在Chrome(以及其他基于Webkit的浏览器)中的呈现方式不同:

http://jsfiddle.net/WZ6x8/

<div>
    <table>
        <tr>
            <th class="absolute">&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </table>
</div>

* {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    table-layout:fixed;
}
th {
    border: 1px solid black;
    width: 100px;
}
.absolute {
    left: 0;
    position: absolute;
}
div {
    margin-left: 100px;
}

为什么会有区别？哪个浏览器出错(根据标准)？如何在不删除线路的情况下修复所有浏览器border-collapse: collapse？

编辑:正如@urzeit所说,"如果你top: 0;在firefox中指定输出与chrome相同." 但是,有两个问题:首先,有多行,将top: 0;它们全部折叠成一个; 第二,绝对定位列的右边缘延伸一个像素太远.您可以在http://jsfiddle.net/WZ6x8/3上看到这两个问题.

让我们考虑下图。我正在生成员工工作时间的月度报告。当水平滚动条向右移动时，我希望该code,name, area, territory列固定在其位置上，并且日期列应该可以水平滚动。向右滚动时，日期列应位于code,name, area, territory列组下方。我该怎么做？有没有可用的 CSS 技巧或插件？