如何将支部名称那栏固定在表格中？ - Vue.js 代码实现
<!--\n * @Description: 党建品牌-一张红图说党史\n-->\n<template>\n <div class="brand-partyHistory">\n <table>\n <thead>\n <tr>\n <th class="base-th fixed-column" style="width: 167px">支部名称</th>\n <th class="base-th" style="width: 200px">类型</th>\n <th class="base-th" style="width: 116px">一月</th>\n <th class="base-th" style="width: 116px">二月</th>\n <th class="base-th" style="width: 116px">三月</th>\n <th class="base-th" style="width: 116px">四月</th>\n <th class="base-th" style="width: 116px">五月</th>\n <th class="base-th" style="width: 116px">六月</th>\n <th class="base-th" style="width: 116px">七月</th>\n <th class="base-th" style="width: 116px">8月</th>\n <th class="base-th" style="width: 116px">9月</th>\n <th class="base-th" style="width: 116px">10月</th>\n <th class="base-th" style="width: 116px">11月</th>\n <th class="base-th" style="width: 116px">12月</th>\n </tr>\n </thead>\n <tbody>\n <template>\n <tr>\n <td rowspan="4">办公室</td>\n <td>完成</td>\n <td>一月</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>一月</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>6</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>单元格6。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td colspan="3">一月</td>\n <td colspan="3">单元格3。</td>\n <td colspan="3">一月</td>\n <td colspan="3">单元格3。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td colspan="6">一月</td>\n <td colspan="6">一月</td>\n </tr>\n <tr>\n <td colspan="14">展开符号</td>\n </tr>\n </template>\n <template>\n <tr>\n <td rowspan="4">办公室</td>\n <td>完成</td>\n <td>一月</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>一月</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>6</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>单元格6。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td colspan="3">一月</td>\n <td colspan="3">单元格3。</td>\n <td colspan="3">一月</td>\n <td colspan="3">单元格3。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td colspan="6">一月</td>\n <td colspan="6">一月</td>\n </tr>\n <tr>\n <td colspan="14">展开符号</td>\n </tr>\n </template>\n <template>\n <tr>\n <td rowspan="4">办公室</td>\n <td>完成</td>\n <td>一月</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>一月</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>6</td>\n <td>单元格1。</td>\n <td>单元格2。</td>\n <td>单元格3。</td>\n <td>单元格4。</td>\n <td>单元格5。</td>\n <td>单元格6。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td colspan="3">一月</td>\n <td colspan="3">单元格3。</td>\n <td colspan="3">一月</td>\n <td colspan="3">单元格3。</td>\n </tr>\n <tr>\n <td>完成</td>\n <td colspan="6">一月</td>\n <td colspan="6">一月</td>\n </tr>\n <tr>\n <td colspan="14">展开符号</td>\n </tr>\n </template>\n </tbody>\n </table>\n </div>\n</template>\n\n<script>\n export default {\n }\n</script>\n\n<style lang="scss" scoped>\n.brand-partyHistory {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n position: relative;\n\n table {\n border-collapse: collapse;\n width: 100%;\n padding-left: 167px; /* 添加左内边距 */\n\n thead {\n tr {\n width: 100%;\n\n .base-th {\n height: 50px;\n color: #333333;\n font-size: 14px;\n font-weight: 700;\n border: 1px solid #dfd6d6;\n background-color: #fffbfb;\n }\n\n .fixed-column {\n position: absolute;\n left: 0;\n }\n }\n }\n\n tbody {\n overflow-y: auto;\n\n tr {\n width: 100%;\n\n td {\n height: 50px;\n text-align: center;\n font-size: 14px;\n font-weight: 400;\n color: #333333;\n border: 1px solid #dfd6d6;\n }\n }\n }\n }\n}\n</style>\n
原文地址: https://www.cveoy.top/t/topic/ql7p 著作权归作者所有。请勿转载和采集!