javascript - 如何使用 JavaScript 固定表格元素

Question

我希望在打印时修复表格内的标签。我编写的代码在 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>

标签： javascriptcssasp.net-core

Answer 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>