js实现表单提交网页打印

js实现点击按钮提交input文本框内的内容添加到对象内再放入已有的数组内，并且在网页中以表格形式打印出来

    type="text" id="txt1" placeholder="id">
    type="text" id="txt2" placeholder="uname">
    type="text" id="txt3" placeholder="age">
    type="text" id="txt4" placeholder="s">
    

var studentsData = [
    {
        id: 1,
        uname: '张三',
        age: 12,
        s: '90分',
        src: '../imgs/zhangsan.webp'
    },
    {
        id: 2,
        uname: '李四',
        age: 13,
        s: '98分',
        src: '../imgs/zhangsan.webp'
    },
    {
        id: 3,
        uname: '王武',
        age: 12,
        s: '99分',
        src: '../imgs/zhangsan.webp'
    },
    {
        id: 4,
        uname: '马溜',
        age: 12,
        s: '80分',
        src: '../imgs/zhangsan.webp'
    },
    {
        id: 5,
        uname: '方蛋',
        age: 16,
        s: '99分',
        src: '../imgs/zhangsan.webp'
    }

]

//点击事件
btn.onclick = function () {

    studentsData.push({
        id: txt1.value,
        uname: txt2.value,
        age: txt3.value,
        s: txt4.value,
    })

    fn()
    console.log(studentsData)

}

//输出表格
function fn() {
    document.write('')
    for (var i = 0; i < studentsData.length; i++) {

        document.write(`
                
            `)
    }
    document.write('

                    ${studentsData[i].id}
                    ${studentsData[i].uname}
                    ${studentsData[i].age}
                    ${studentsData[i].s}
                   
                   ${studentsData[i].src}">
                   
                
')
}
fn()
运行后能给正常添加进群组但是覆盖了网页显示，表单和css样式会消失
目前初学想了解下
如何在网页中以表格形式打印出来css样式不会消失的，比如图片的宽度（css里设置的50px）在提交表单后就消失了图片变得超大