如何使用JavaScript打印HTML表格tbody并保留表格格式

<tbody> 是表格的内部子标签，仅作为表格行的容器存在，无法脱离外层 <table> 标签独立渲染为表格结构。直接将tbody的HTML写入新窗口时，浏览器会把tbody内的内容按普通文本流解析，自然会丢失单元格排版、边框等所有表格格式。

修改printtbodyfun逻辑，获取到tbody内容后，手动包裹和原表格属性一致的外层<table>标签，再写入新窗口即可保留完整表格格式。

修正后的完整代码 #

<table border="1" cellpadding="3" id="printTable">
    <tbody id="printTbody"><tr>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>        
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>        
        <td>67</td>
    </tr>
</tbody></table>

<br />
<br />

<button onclick="printTablefun()">Print Table</button>
<button onclick="printtbodyfun()">Print Tbody</button>
<script>
function printTablefun()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.document.close();
   newWin.print();
   newWin.close();
}

function printtbodyfun()
{
   var tbodyToPrint=document.getElementById("printTbody");
   newWin= window.open("");
   // 包裹外层table标签，同步原表格的border、cellpadding属性保证格式一致
   newWin.document.write(`<table border="1" cellpadding="3">${tbodyToPrint.outerHTML}</table>`);
   newWin.document.close();
   newWin.print();
   newWin.close();
}
</script>

• 外层包裹的<table>标签需要和原表格的属性（border、cellpadding、class、自定义样式等）保持一致，避免打印样式和原表格出现偏差
• 写入HTML后调用newWin.document.close()，可以解决部分浏览器下新窗口文档加载状态异常、打印预览加载不全的问题
• 如果后续需要打印thead、tfoot等表格子元素，都需要用同样的逻辑包裹外层table标签再写入

内容的提问来源于stack exchange，提问作者A. Chithrai