element-ui的表格是怎样做到自适应的？

发布于
2018-11-08

看了element-ui框架的表格组件：

当字段很多的时候，填满宽度

当字段很少的时候，也能填满宽度

我想知道这是怎么做到的，我自己写了个table怎样才能改造成像element那样

<table class="table">
    <thead>
        <tr>
            <td>城市</td>
            <td>姓名</td>
            <td>风景</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>海口</td>
            <td>琼海水库</td>
            <td>万年古玩城</td>
        </tr>
    </tbody>
</table>

.table{
    border-collapse: collapse;
    thead{
        tr{
            td{
                font-weight: bold;
                width: 180px;
                text-align: left;
                color: #909399;
                border: 1px solid #ebeef5;
                padding: 10px;
                font-size: 15px;
            }
        }
    }
    tbody{
        tr{
            td{
                width: 180px;
                text-align: left;
                color: #606266;
                border: 1px solid #ebeef5;
                padding: 10px;
                font-size: 14px;
                transition: background-color .25s ease;
            }
        }
        tr:hover{
            background-color: #f5f7fa;
            transition: background-color .25s ease;
        }
    }
}