如何定住表格的第一列和第一行

如何定住表格的第一列和第一行 #页面布局

如何将表格的第一列定住

将表格的第一列定住，表格的右侧滚动

方法一

<style>
    .outer {
        position:relative;
    }
    .inner {
        margin-left: 第一列的宽度;
        overflow: hidden;
        overflow-x: auto;
    }
    td:first-child {
        position: absolute;
        left: 0;
        width: 第一列的宽度;
    }
    td {
        overflow: hidden;
        white-space: nowrap;
    }
</style>
<div class="outer" >
    <div class="inner" >
        <table>
            <tr>
                <td>我是定住的单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
            <tr>
                <td>我是定住的单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
            <tr>
                <td>我是定住的单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>
    </div>
</div>

思想

将第一列绝对定位在outer上，限制inner的宽度来出现滚动条

优点

仅使用css来定位

缺点

当第一列的单元格高度比同一行的其他单元格高度高的时候第一列的单元格由于已经脱离了表格，表格不能再根据一系列的高度来撑开行高。所以每个单元格都只能设置成一行，不能换行。

方法二

<style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    .outer {
        position:relative;
        width: 最大宽度(一般为100%);
    }
    .inner {
        margin-left: 第一列的宽度;
        overflow: hidden;
        overflow-x: auto;
    }
    .base-table {
        position: absolute;
        left: 0;
        top: 0;
    }
    .base-table td{
        width: 第一列的宽度;
    }
    .target-table td{
        min-width: 80px;
    }
</style>
<div class="outer" >
    <div class="inner" >
        <table class="base-table" >
            <tr>
                <td>我是定住的单元格1</td>
            </tr>
            <tr>
                <td>我是定住的单元格1</td>
            </tr>
            <tr>
                <td>我是定住的单元格1</td>
            </tr>
        </table>
        <table class="target-table" >
            <tr>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
            <tr>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
            <tr>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>
    </div>
</div>
<script>
    $(function(){
        var baseHeightArray = [];           
        $('.base-table tr').each(function (index, el) {
            baseHeightArray.push($(el).find('td').height());
        });
        $('.target-table tr').each(function (index, el) {
            $(el).find('td').height(baseHeightArray[index]);
        });
    })
</script>

思想

将一个表格拆成两个表格，通过base获取表格的高度来分别渲染target表格的高度,
(如果右边比较高则相反)；

优点

不需要复杂的计算，是第一种的升级版，需要先要确定哪个表格高度比较高，适用于滚target表格是简单数据或单选、复选框的集合

缺点

不适用于两边都高度都不确定的情况，需要两个表格结构复杂了DOM结构，需要两次循环

方法三

<style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    td {
        border: 1px solid #ddd;
        padding: 8px 5px;
    }
    .outer {
        position:relative;
        width: 300px;
    }
    .inner {
        margin-left: 90px;
        overflow: hidden;
        overflow-x: auto;
    }
    .base-table {
        position: absolute;
        left: 0;
        top: 0;
    }
    .base-table td{
        width: 80px;
    }
    .target-table td{
        min-width: 80px;
    }
</style>
<div class="outer" >
    <div class="inner" >
        <table class="base-table" >
            <tr>
                <td>我是定住的单元格1</td>
            </tr>
            <tr>
                <td>我是定住的单元格1</td>
            </tr>
            <tr>
                <td>我是定住的单元格1</td>
            </tr>
        </table>
        <table class="target-table" >
            <tr>
                <td>单元格2单元格2单元格2单元格2单元格2单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
            <tr>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
            <tr>
                <td>单元格2</td>
                <td>单元格3单元格3单元格3单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>
    </div>
</div>
<script>
    $(function(){
        var baseHeightArray = [];
        var baseTable = $('.base-table');
        var targetTable = $('.target-table');
        var targetTr = targetTable.find('tr');
        baseTable.find('tr').each(function (index, el) {
            var baseH = $(el).find('td').height();
            var targetH = targetTr.eq(index).height();
            var h = baseH > targetH ? baseH : targetH;
            baseHeightArray.push(h);
        });
        baseTable.find('tr').each(function(index, el){
            $(el).find('td').height(baseHeightArray[index]);
        });
        targetTr.each(function(index, el){
            $(el).find('td').height(baseHeightArray[index]);
        });
    })
</script>

思想

其实本方法就是第二种方法的升级版，多了一个相对于两边单元格高度的计算

优点

不需要确定两边单元格的高度，想怎么变就怎么变，爽

缺点

计算多

如何将表格的第一行定住

未完待续…

如何将表格的第一行和第一列同时定住