如何使用 JavaScript 固定表格元素答案

【问题标题】：How to keep table elements fixed with JavaScript如何使用 JavaScript 固定表格元素
【发布时间】：2021-11-11 06:41:06
【问题描述】：

我希望在打印时修复表格内的标签。我编写的代码在 View 中运行良好，但是在 JavaScript 中打印时，如果其中一列很大，则其余列位于中间，但我希望每个人都保持在顶部，我使用了 position: fixed 但表格崩溃了。

<script>


    function printDiv() {
        var divToPrint = document.getElementById('table');
        var htmlToPrint = '' +
            '<style type="text/css">' +
            'table th, table td,table tr {' +
            'font-family:B Nazanin;'+
            'border:0.1em solid #000;' +
              'text-align:center;' + 
            
            'font-size:14px;' +
            'padding:0.2em;' +
            '}' +
            '</style>';


        htmlToPrint += divToPrint.outerHTML;
        newWin = window.open("");
        newWin.document.write(htmlToPrint);
        newWin.print();
        newWin.close();
    }



</script>

【问题讨论】：

不是很清楚问题是什么。您希望所有列的宽度都相同吗？
我希望列的内容从顶部开始
但是如图所示，打印的时候有些列的内容在中间

标签： javascript css asp.net-core

【解决方案1】：

您需要使用vertical-align: top; 来制作每个单元格中的内容。显示在顶部。

<style>
            .table-bd{
                border-collapse: collapse;
                border: none;
                width: 200px;
            }
            .table-bd td{
                border: 1px solid #CCCCCC;
                word-wrap: break-word;
                word-break:break-all;
                width: 50px;
                height: 80px;
                vertical-align: top;
            }
        </style>

<table class="table-bd">
            <tr>
                <td>asdfasdfasdf</td>
                <td>asdfasdfasdfasdfasdf</td>
            </tr>
            <tr>
                <td>asdfasdfasdf</td>
                <td>qwerqwerqwerqwerqwer</td>
            </tr>
            <tr>
                <td>erwtewyrettyrety</td>
                <td>tyuirtyiuiytugfhdfgh</td>
            </tr>
        </table>

【讨论】：