小编Jar*_*alo的帖子

当用户在X轴上滚动时,我正在尝试在表格中修复我的第一列.我正在使用这个结构:

<div class="table-wrapper">
    <table id="consumption-data" class="data">
        <thead class="header">
            <tr>
                <th>Month</th>
                <th>Item 1</th>
            </tr>
        </thead>
        <tbody class="results">
            <tr>
                <th>Jan</th>
                <td>3163</td>
            </tr>
            <tr>
                <th>Feb</th>
                <td>3163.7</td>         
            </tr>
            <tr>
                <th>Mar</th>
                <td>3163.7</td>
            </tr>
            <tr>
                <th>Apr</th>
                <td>3163.7</td>    
            </tr>
            <tr>    
                <th>May</th>
                <td>3163.7</td>
            </tr>
            <tr>
                <th>Jun</th>
                <td>3163.7</td>
            </tr>

            <tr>
                <th>...</th>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

用户将选择项目数,即表中可能有90个项目.这将需要在X轴上滚动.我遇到的问题是:

如何修复的位置th标签内tbody(中和th:first-child的thead)？

我一直在寻找其他一些线程,但是它们并没有真正解释我是如何实现固定列的,这让我很难理解代码的作用和我应该做的事情.

我还检查了人们在另一个表中拆分header-column的解决方案.这对我来说是不可能的,因为我稍后会将数据导出到其他系统.

我的css:

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
}

这修复了滚动,现在可以使用:

tbody th, 
thead th:first-child {}

有人有任何想法吗？

编辑:这是一个jsFiddle:http://jsfiddle.net/DJqPf/5/

首先,我是测试驱动开发(TDD)和行为驱动开发(BDD)的新手,我很难相信这是开发网页的好方法,因为页面通常需要在快速的方式,如果你必须在你做任何事情之前开发测试代码,这很难.

无论如何!

我写这个帖子的原因不是因为,我发现了什么,问题(但如果你有输入,我也会喜欢阅读它!).我一直在阅读一些关于语法,它是如何工作的以及所有这些.我发现,如果我的函数没有返回值,那么这种方法很难实现.

比方说,我有一个点击事件触发函数,只是改变输入的文本值:

$('input[type="text"]').click(function() {
    $(this).val('Oh, that tickles!');
});

茉莉如何处理这个？像下面的代码一样？:

describe('Input type text is clicked', function () {  
    it('changes text in the input field', function () {  
        expect($('input[type="text"]').val()).toEqual("Oh, that tickles!");  
    });  
});

这虽然是错误的,因为jQuery对象可以包含多个不包含该值的输入字段.有没有找到元素的方法(例如$(this)或类似的),或者我应该在茉莉花测试中放置一个点击处理程序？像这样:

describe('Input type text is clicked', function () {  
    it('changes text in the input field', function () {
        $('input[type="text"]').click(function() {
            expect($(this).val()).toEqual("Oh, that tickles!");
        }  
    });  
});

一些清晰度会很好:)

非常感谢提前!

/ J.