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

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

如何将表格的第一列定住

---

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

方法一

<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>

思想

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

优点

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

缺点

计算多

如何将表格的第一行定住

---

未完待续…

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

---

未完待续…