前端一记-table宽度挤压

移动端对表格的使用<table>

通过 table 添加table-layout:fixed;

给子属性就可以设置给定宽度和word-wrap:break-word

踩坑点 table必须给宽度，如果是动态表头，也可以给width: 100%;

在table上一层dom可以 overflow: auto;

这样就可以实现滚动查看表格，其中第一列和第一行也可以加入 position: sticky;

<div class="table-view">
    <table class="colorW table" border="1" cellpadding="0" cellspacing="0">
        <thead class="table-header">
            <tr>
                <th class="table-left-header">区域</th>
                <th v-for="(item, index) in visitCountEchart.xAxisData" :key="index" class="table-header-item w90px">{{ item }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in visitCountEchart.seriesData" :key="index">
                <td class="table-left-header">{{ item.name }}</td>
                <td v-for="(item1, index1) in item.data" :key="index1">{{ item1 }}</td>
            </tr>
        </tbody>
    </table>
</div>

.table {
    text-align: center;
    table-layout:fixed;
    width: 100%;
    .table-header {
        z-index: 1;
        position: sticky;
        top: 0;
        background-color: #121640;
    }
    .table-left-header{
        position: sticky;
        left: 0;
        width: 80px;
        word-wrap:break-word;
        background-color: #121640;
    }
    .table-header-item{
        width: 80px;
        word-wrap:break-word;
    }
}