总结vue+elementUI的填坑之路（三）-- 原生html表格

来说一个原生table固定首列的例子。。因为也是项目中用到的，就一起记录下来吧

参考：https://blog.csdn.net/joyce_lcy/article/details/80390281

<template>
    <div class='container'>
        <!--第一个表格，只显示第一列，其他列隐藏-->
        <div  class="table1-container">
            <table  border=0 cellpadding="0" cellspacing="0">
                <tr>
                    <td>1-1</td>
                    <td>1-2</td>
                    <td>1-3</td>
                    <td>1-4</td>
                    <td>1-5</td>
                    <td>1-6</td>
                    <td>1-7</td>
                    <td>1-8</td>
                </tr>
                <tr>
                    <td>2-1</td>
                    <td>2-2</td>
                    <td>2-3</td>
                    <td>2-4</td>
                    <td>2-5</td>
                    <td>2-6</td>
                    <td>2-7</td>
                    <td>2-8</td>
                </tr>
                <tr>
                    <td>3-1</td>
                    <td>3-2</td>
                    <td>3-3</td>
                    <td>3-4</td>
                    <td>3-5</td>
                    <td>3-6</td>
                    <td>3-7</td>
                    <td>3-8</td>
                </tr>
                <tr>
                    <td>4-1</td>
                    <td>4-2</td>
                    <td>4-3</td>
                    <td>4-4</td>
                    <td>4-5</td>
                    <td>4-6</td>
                    <td>4-7</td>
                    <td>4-8</td>
                </tr>
            </table>
        </div>
        <!--第2个表格隐藏第一列，其他列显示-->
        <div class="table2-container">
            <table  border=0 cellpadding="0" cellspacing="0">
                <tr>
                    <td>1-1</td>
                    <td>1-2</td>
                    <td>1-3</td>
                    <td>1-4</td>
                    <td>1-5</td>
                    <td>1-6</td>
                    <td>1-7</td>
                    <td>1-8</td>
                </tr>
                <tr>
                    <td>2-1</td>
                    <td>2-2</td>
                    <td>2-3</td>
                    <td>2-4</td>
                    <td>2-5</td>
                    <td>2-6</td>
                    <td>2-7</td>
                    <td>2-8</td>
                </tr>
                <tr>
                    <td>3-1</td>
                    <td>3-2</td>
                    <td>3-3</td>
                    <td>3-4</td>
                    <td>3-5</td>
                    <td>3-6</td>
                    <td>3-7</td>
                    <td>3-8</td>
                </tr>
                <tr>
                    <td>4-1</td>
                    <td>4-2</td>
                    <td>4-3</td>
                    <td>4-4</td>
                    <td>4-5</td>
                    <td>4-6</td>
                    <td>4-7</td>
                    <td>4-8</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'index',
    data(){
      return{

      }
    },
    mounted(){

    },
    methods: {

    }
  }
</script>

<style scoped>
    table{
        border-bottom: solid 1px black;
        border-left: solid 1px black;
    }

    td {
        border-right: solid 1px black;
        border-top: solid 1px black;
        padding: 10px;
    }

    .container{
        position: relative;
    }

    /*两个表格保持一样的宽度*/
    .table1-container, .table2-container{
        width: 220px;
    }

    /*让两个表格重叠*/
    .table1-container{
        position: absolute;
        left: 0; top: 0;
        overflow: hidden;
        color: red;
    }

    .table1-container td:first-child{
        background-color: white;
    }

    /*第一个表格只显示第一列*/
    .table1-container td:not(:first-child){
        visibility: hidden;
    }

    .table2-container{
        overflow: scroll;
    }

</style>