登录
当前位置： 首页 > 工具软件 > LCVesper Table Cell > 使用案例 >

IE9 适配 flex 转换 table-row，table-cell 绘制表格

葛修永
2023-12-01

由于最开始绘制表格时没考虑IE9的适配，使用flex布局绘制了表格。完成后发现要适配IE9，直接原地爆炸，重写吧不工作量有点大。最终百度发现可以通过使用table-row和table-cell解决问题。

参考l链接：https://www.jianshu.com/p/df53fc3ed00b
主要使用以下样式

/*主要代码*/
.row {
    display: table-row;
}

/*主要代码*/
.cell {
    width: 130px;
    height: 50px;
    display: table-cell;
    border: #000000 solid 1px;
    text-align: center;
    vertical-align: middle;
}

解决过程中遇到的问题

1、row 设置高度页面显示没问题但是打印时则设置高度无效。
解决方法：设置cell高度即可
2、如果设置了单元格宽度，上下相邻表格如果单元格宽度不同则会相互影响，不会按照设置的宽度显示。
解决方法：在他们中间放一个空的div即可解决。

原先使用flex布局绘制表格的完整代码

<!DOCTYPE html>
<html lang="zh-CN" translate="no">

<head>
    <meta charset="UTF-8">
    <title>操作人员管理表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style media=print>
@page {
    /* 纵向 */
    size: landscape;
    margin: 0;
}

/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
.page {
    page-break-after: always;
}
</style>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: serif, Microsoft YaHei;
}

.print-body {
    margin: 0px auto;
    margin-top: 30px;
    width: 1000px;
    font-size: 14px;
    color: #000000;
}

.row {
    display: flex;
}

.cell {
    width: 130px;
    min-height: 50px;
    border: #000000 solid 1px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-input {
    width: 200px;
}

.cell-right {
    border-left: 0px;
}

.cell-bottom {
    border-top: 0px;
}

.cell-end {
    flex-grow: 1;
}

.stamp {
    overflow: hidden;
    border: #000000 solid 1px;
    border-top: 0px;
    height: 80px;
    width: 100%;
}

.stamp-cell {
    overflow: hidden;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
}

.stamp-title {
    width: 220px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 20px;
}

.date-cell {
    width: 990px;
    height: 40px;
    line-height: 40px;
}

.date-item {
    margin-left: auto;
}

.date-title {
    margin-right: 10px;
}

.date-input {
    width: 40px;
    text-align: center;
}

.cell-premises-info {
    width: 310px;
    height: 30px;
}

.cell-projectName {
    width: 140px;
    height: 30px;
}

.cell-houseNo {
    width: 170px;
    height: 30px;
}

.cell-No {
    width: 50px;
}

.cell-name,
.cell-operation,
.cell-initial {
    width: 80px;
}

.cell-cardNo {
    width: 170px;
}

.cell-certificate {
    width: 150px;
}

.cell-small {
    min-height: 30px;
}

.cell-contract-manage {
    width: 650px;
    min-height: 30px;
}

.cell-other {
    width: 220px;
    min-height: 30px;
}

.cell-signed,
.cell-affirm {
    width: 85px;
}

.cell-query,
.cell-template,
.cell-handover-letter,
.cell-equity,
.cell-password {
    width: 100px;
}

.cell-invalid {
    width: 120px;
}

.top-title {
    width: 100%;
    text-align: center;
}

.title {
    width: 100%;
    font-size: 20px;
    margin-bottom: 10px;
}

.table-num-span {
    float: right;
    margin-right: 50px;
}

.table-num-span-div {
    height: 20px;
}
</style>

<body>
    <OBJECT id="WebBrowser1" height=0 width=0 classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>
    <div class="html-body-lay" id="app">
        <div class="print-body page" v-for="(item,index) of infoPage">
            <div class="row top-title">
                <div class="title">操作人员管理表</div>
            </div>
            <div class="table-num-span-div">
                <div class="table-num-span">表六</div>
            </div>
            <div></div>
            <div class="row">
                <div class="cell cell-No">序<br /><br />号</div>
                <div class="cell cell-right cell-name">姓 名</div>
                <div class="cell cell-right cell-cardNo">身份证号</div>
                <div class="cell cell-right cell-certificate">岗位编号</div>
                <div class="cell-right">
                    <div class="cell cell-right cell-premises-info">负责设备情况</div>
                    <div class="row cell-right cell-bottom">
                        <div class="cell cell-right cell-bottom cell-projectName">设备名称</div>
                        <div class="cell cell-right cell-bottom cell-houseNo">具体设备号</div>
                    </div>
                </div>
                <div class="cell cell-right cell-operation">新增人员（√）</div>
                <div class="cell cell-right cell-operation">取消人员（√）</div>
                <div class="cell cell-right cell-operation">调整权限（√）</div>
            </div>
            <div class="row" v-for="(info,index) of item">
                <div class="cell cell-small cell-bottom cell-No">{{info.serial}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-name">{{info.name}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-cardNo">{{info.cardno}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-certificate">{{info.skillcertificateno}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-bottom cell-projectName">{{info.projectname}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-bottom cell-houseNo">{{info.projectlocation}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-operation">{{info.isAdd}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-operation">{{info.isDel}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-operation">{{info.isUpdate}}</div>
            </div>
            <div class="row">
                <div class="cell cell-small cell-bottom cell-end">权限设置</div>
            </div>
            <div class="row">
                <div class="cell cell-bottom cell-No">序<br /><br />号</div>
                <div class="cell cell-bottom cell-right cell-name">姓 名</div>
                <div class="cell-right">
                    <div class="cell cell-bottom  cell-right cell-contract-manage">设备管理</div>
                    <div class="row">
                        <div class="cell  cell-right cell-bottom cell-query">设备管理1</div>
                        <div class="cell cell-right cell-bottom cell-initial">设备管理2</div>
                        <div class="cell cell-right cell-bottom cell-signed">设备管理3</div>
                        <div class="cell cell-right cell-bottom cell-affirm">设备管理4</div>
                        <div class="cell cell-right cell-bottom cell-template">设备管理5</div>
                        <div class="cell cell-right cell-bottom cell-handover-letter">设备管理6</div>
                        <div class="cell cell-right cell-bottom cell-equity">设备管理7</div>
                    </div>
                </div>
                <div class="cell-right">
                    <div class="cell cell-right cell-bottom  cell-other">其他权限</div>
                    <div class="row cell-right cell-bottom">
                        <div class="cell cell-right cell-bottom cell-password">其他权限1</div>
                        <div class="cell cell-right cell-bottom cell-invalid">其他权限2</div>
                    </div>
                </div>
            </div>
            <div class="row" v-for="(info,index) of item">
                <div class="cell cell-small cell-bottom cell-No">{{info.serial}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-name">{{info.name}}</div>
                <div class="cell cell-small  cell-right cell-bottom cell-query">{{info.query}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-initial">{{info.initial}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-signed">{{info.signed}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-affirm">{{info.affirm}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-template">{{info.template}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-handover-letter">{{info.handoverletter}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-equity">{{info.equity}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-password">{{info.password}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-invalid">{{info.invalid}}</div>
            </div>
            <div class="stamp">
                <div class="stamp-cell">
                    <div class="stamp-title">
                        申请人：
                    </div>
                </div>
                <div class="date-cell row">
                    <div class="date-item row">
                        <div class="date-title">申请日期:</div>
                        <div class="date-input"></div>
                        <div class="date-div">年</div>
                        <div class="date-input"></div>
                        <div class="date-div">月</div>
                        <div class="date-input"></div>
                        <div class="date-div">日</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
var afterPrint = function() {
    window.close()
};
window.onafterprint = afterPrint;
new Vue({
    el: '#app',
    data: {
        infoPage: [],
        infoList: [],
        operaterInfo: {
            serial: "",
            name: "",
            cardno: "",
            skillcertificateno: "",
            operatetype: "",
            authoritys: "",

        },
    },
    computed: {

    },
    methods: {
        initInfo: function() {
            var that = this
            var size = 5
            for (var i = 1; i <= size; i++) {
                var info = {
                    serial: i,
                    name: "",
                    cardno: "",
                    skillcertificateno: "",
                    operatetype: "",
                    authoritys: "",
                }
                that.infoList.push(info)
            }
        },
        pageInfo: function() {
            var that = this
            var page = Math.ceil(that.infoList.length / 5)
            for (var i = 0; i < page; i++) {
                // 每4个换页
                var info = that.infoList.slice(i * 5, 5 + i * 5)
                that.infoPage.push(info)
            }
        },
        isIE: function() {
            if (!!window.ActiveXObject || "ActiveXObject" in window)
                return true;
            else
                return false;
        },
        // 设置IE打印页眉页脚为空
        pagesetup_null: function() {
            var hkey_root = "HKEY_CURRENT_USER"
            var hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"
            try {
                var RegWsh = new ActiveXObject("WScript.Shell");
                hkey_key = "header";
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
                hkey_key = "footer";
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
            } catch (e) {}
        },
        // 设置IE打印方向
        setLandscape: function() {
            try {
                var RegWsh = new ActiveXObject("WScript.Shell");
                RegWsh.sendKeys('%fu');
                RegWsh.sendKeys('%a');
                RegWsh.sendKeys('{ENTER}');
            } catch (e) {}
        },
        print: function() {
            var that = this
            if (that.isIE()) {
                that.setLandscape();
                setTimeout(function() {
                    that.pagesetup_null()
                }, 1000);
                setTimeout(function() {
                    document.getElementById("WebBrowser1").execWB(7, 1);
                }, 1500);
            } else {
                var subOutputRankPrint = document.getElementById('app');
                var newContent = subOutputRankPrint.innerHTML;
                var oldContent = document.body.innerHTML;
                document.body.innerHTML = newContent;
                window.print();
            }
        },
    },
    created: function() {
        var that = this
    },
    beforeMount: function() {
        var that = this
    },
    updated: function() {
        var that = this
    },
    mounted: function() {
        var that = this
        that.initInfo();
        that.pageInfo();
    },
    watch: {

    }
})
</script>

</html>

修改后完整示例代码

<!DOCTYPE html>
<html lang="zh-CN" translate="no">

<head>
    <meta charset="UTF-8">
    <title>操作人员管理表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style media=print>
@page {
    /* 纵向 */
    size: landscape;
    margin: 0;
}

/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
.page {
    page-break-after: always;
}
</style>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: serif, Microsoft YaHei;
}

.print-body {
    margin: 0px auto;
    margin-top: 30px;
    width: 1000px;
    font-size: 14px;
    color: #000000;
}

/*主要代码*/
.row {
    display: table-row;
}

/*主要代码*/
.cell {
    width: 130px;
    height: 50px;
    display: table-cell;
    border: #000000 solid 1px;
    text-align: center;
    vertical-align: middle;
}

.cell-input {
    width: 200px;
}

.cell-right {
    border-left: 0px;
}

.cell-bottom {
    border-top: 0px;
}

.cell-son {
    display: table-cell;
}

.cell-title-div {
    width: 1000px;
}

.stamp {
    overflow: hidden;
    border: #000000 solid 1px;
    border-top: 0px;
    height: 80px;
    width: 100%;
}

.stamp-cell {
    overflow: hidden;
    width: 100%;
    height: 40px;
}

.stamp-title {
    width: 220px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 20px;
}

.date-cell {
    width: 990px;
    height: 40px;
    line-height: 40px;
}

.date-cell div {
    display: inline-block;
    vertical-align: middle;
}

.date-item {
    float: right;
}

.date-title {
    margin-right: 10px;
}

.date-input {
    width: 40px;
    text-align: center;
}

.cell-premises-info {
    width: 310px;
    height: 30px;
}

.cell-projectName {
    width: 140px;
    height: 30px;
}

.cell-houseNo {
    width: 170px;
    height: 30px;
}

.cell-No {
    width: 50px;
}

.cell-name,.cell-operation,.cell-initial {
    width: 80px;
}

.cell-cardNo {
    width: 170px;
}

.cell-certificate {
    width: 150px;
}

.cell-small {
    height: 30px;
}

.cell-contract-manage {
    width: 650px;
    height: 30px;
}

.cell-other {
    width: 220px;
    height: 30px;
}

.cell-query,.cell-template,.cell-handover-letter,.cell-equity,.cell-password {
    width: 100px;
}

.cell-signed,.cell-affirm {
    width: 85px;
}

.cell-invalid {
    width: 120px;
}

.top-title {
    width: 100%;
    text-align: center;
}

.title {
    width: 100%;
    font-size: 20px;
    margin-bottom: 10px;
}

.table-num-span {
    float: right;
    margin-right: 50px;
}

.table-num-span-div {
    height: 20px;
}

</style>

<body>
    <OBJECT id="WebBrowser1" height=0 width=0 classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>
    <div class="html-body-lay" id="app">
        <div class="print-body page" v-for="(item,index) of infoPage">
            <div class="top-title">
                <div class="title">操作人员管理表</div>
            </div>
            <div class="table-num-span-div">
                <div class="table-num-span">表六</div>
            </div>
            <div></div>
            <div class="row">
                <div class="cell cell-No">序<br /><br />号</div>
                <div class="cell cell-right cell-name">姓 名</div>
                <div class="cell cell-right cell-cardNo">身份证号</div>
                <div class="cell cell-right cell-certificate">岗位编号</div>
                <div class="cell-right">
                    <div class="cell cell-right cell-premises-info">负责设备情况</div>
                    <div></div>
                    <div class="row cell-right cell-bottom">
                        <div class="cell cell-right cell-bottom cell-projectName">设备名称</div>
                        <div class="cell cell-right cell-bottom cell-houseNo">具体设备号</div>
                    </div>
                </div>
                <div class="cell cell-right cell-operation">新增人员（√）</div>
                <div class="cell cell-right cell-operation">取消人员（√）</div>
                <div class="cell cell-right cell-operation">调整权限（√）</div>
            </div>
            <div></div>
            <div class="row" v-for="(info,index) of item">
                <div class="cell cell-small cell-bottom cell-No">{{info.serial}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-name">{{info.name}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-cardNo">{{info.cardno}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-certificate">{{info.skillcertificateno}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-bottom cell-projectName">{{info.projectname}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-bottom cell-houseNo">{{info.projectlocation}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-operation">{{info.isAdd}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-operation">{{info.isDel}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-operation">{{info.isUpdate}}</div>
            </div>
            <div></div>
            <div class="row">
                <div class="cell cell-small cell-bottom cell-title-div">权限设置</div>
            </div>
            <div></div>
            <div class="row">
                <div class="cell cell-bottom cell-No">序<br /><br />号</div>
                <div class="cell cell-bottom cell-right cell-name">姓 名</div>
                <div class="cell-son">
                    <div class="cell cell-bottom  cell-right cell-contract-manage">设备管理</div>
                    <div></div>
                    <div class="row">
                        <div></div>
                        <div class="cell cell-right cell-bottom cell-query">设备管理1</div>
                        <div class="cell cell-right cell-bottom cell-initial">设备管理2</div>
                        <div class="cell cell-right cell-bottom cell-signed">设备管理3</div>
                        <div class="cell cell-right cell-bottom cell-affirm">设备管理4</div>
                        <div class="cell cell-right cell-bottom cell-template">设备管理5</div>
                        <div class="cell cell-right cell-bottom cell-handover-letter">设备管理6</div>
                        <div class="cell cell-right cell-bottom cell-equity">设备管理7</div>
                        <div></div>
                    </div>
                    <div></div>
                </div>
                <div class="cell-son">
                    <div class="cell cell-right cell-bottom  cell-other">其他权限</div>
                    <div></div>
                    <div class="row cell-right cell-bottom">
                        <div class="cell cell-right cell-bottom cell-password">其他权限1</div>
                        <div class="cell cell-right cell-bottom cell-invalid">其他权限2</div>
                    </div>
                    <div></div>
                </div>
                <div></div>
            </div>
            <div></div>
            <div class="row" v-for="(info,index) of item">
                <div class="cell cell-small cell-bottom cell-No">{{info.serial}}</div>
                <div class="cell cell-small cell-bottom cell-right cell-name">{{info.name}}</div>
                <div class="cell cell-small  cell-right cell-bottom cell-query">{{info.query}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-initial">{{info.initial}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-signed">{{info.signed}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-affirm">{{info.affirm}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-template">{{info.template}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-handover-letter">{{info.handoverletter}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-equity">{{info.equity}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-password">{{info.password}}</div>
                <div class="cell cell-small cell-right cell-bottom cell-invalid">{{info.invalid}}</div>
            </div>
            <div class="stamp">
                <div class="stamp-cell">
                    <div class="stamp-title">
                        申请人：
                    </div>
                </div>
                <div class="date-cell">
                    <div class="date-item row">
                        <div class="date-title">申请日期:</div>
                        <div class="date-input"></div>
                        <div class="date-div">年</div>
                        <div class="date-input"></div>
                        <div class="date-div">月</div>
                        <div class="date-input"></div>
                        <div class="date-div">日</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
var afterPrint = function() {
    window.close()
};
// window.onafterprint = afterPrint;
new Vue({
    el: '#app',
    data: {
        infoPage: [],
        infoList: [],
        operaterInfo: {
            serial: "",
            name: "",
            cardno: "",
            skillcertificateno: "",
            operatetype: "",
            authoritys: "",

        },
    },
    computed: {

    },
    methods: {
        initInfo: function() {
            var that = this
            var size = 5
            for (var i = 1; i <= size; i++) {
                var info = {
                    serial: i,
                    name: "",
                    cardno: "",
                    skillcertificateno: "",
                    operatetype: "",
                    authoritys: "",
                }
                that.infoList.push(info)
            }
        },
        pageInfo: function() {
            var that = this
            var page = Math.ceil(that.infoList.length / 5)
            for (var i = 0; i < page; i++) {
                // 每4个换页
                var info = that.infoList.slice(i * 5, 5 + i * 5)
                that.infoPage.push(info)
            }
        },
        isIE: function() {
            if (!!window.ActiveXObject || "ActiveXObject" in window)
                return true;
            else
                return false;
        },
        // 设置IE打印页眉页脚为空
        pagesetup_null: function() {
            var hkey_root = "HKEY_CURRENT_USER"
            var hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"
            try {
                var RegWsh = new ActiveXObject("WScript.Shell");
                hkey_key = "header";
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
                hkey_key = "footer";
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
            } catch (e) {}
        },
        // 设置IE打印方向
        setLandscape: function() {
            try {
                var RegWsh = new ActiveXObject("WScript.Shell");
                RegWsh.sendKeys('%fu');
                RegWsh.sendKeys('%a');
                RegWsh.sendKeys('{ENTER}');
            } catch (e) {}
        },
        print: function() {
            var that = this
            if (that.isIE()) {
                that.setLandscape();
                setTimeout(function() {
                    that.pagesetup_null()
                }, 1000);
                setTimeout(function() {
                    document.getElementById("WebBrowser1").execWB(7, 1);
                }, 1500);
            } else {
                var subOutputRankPrint = document.getElementById('app');
                var newContent = subOutputRankPrint.innerHTML;
                var oldContent = document.body.innerHTML;
                document.body.innerHTML = newContent;
                window.print();
            }
        },
    },
    created: function() {
        var that = this
    },
    beforeMount: function() {
        var that = this
    },
    updated: function() {
        var that = this
    },
    mounted: function() {
        var that = this
        that.initInfo();
        that.pageInfo();
    },
    watch: {

    }
})
</script>

</html>
 类似资料：

相关阅读

BootStrap table表格插件自适应固定表头(超好用)CSS3转换：旋转；在IE9中JavaScript如何动态创建table表格bootstrap table表格插件使用详解Oracle table dynamic partition

相关文章

SQL ALTER TABLESQL DROP TABLESQL CREATE TABLEPostgreSQL ALTER TABLE 命令Flink-Sql和Table Api-3

相关问答

pg：：undefinedtable：error：表“table-name”不存在javascript - 实现table表头折叠？前端 - el-table重绘错误如何解决？如何将cassandraRow转换为Row（apache spark）？将可绘制资源转换为位图

相关文档

Adobe Flex 入门教程配色宝典配色手册Windows 访问控制制造开源软件
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.