当我使用 javaScript 打印表格时，表格的一半内容被隐藏

Question

This is the print preview.

这是我打印表格的 JavaScript 代码：

function PrintElem(divID) {
    var restorepage = document.body.innerHTML;
    var printcontent = document.getElementById(divID).innerHTML;
    document.body.innerHTML = printcontent;
    window.print();
    document.body.innerHTML = restorepage;
}

这是我用于打印表格的 CSS：

<style type="text/css" media="print">
    @page
    {
        size:  auto;
        margin: 0;
    }
    a[href]:after {
        content: none !important;
    }
    html
    {
        background-color: #FFFFFF;
        margin: 0;
    }
    body
    {
        margin: 5mm 15mm 20mm 15mm;
    }
</style>

当我打印我的表格时，有一半 td 没有打印。

这是我要打印的表格：

    <div class="table-responsive" id="myDiv">
        <span id="hide" hidden>2</span>
        <table class="table" border="">
            <tbody>
            <tr>
                <td><b>S.No.</b></td>
                <td><b>Order Number</b></td>
                <td><b>Doctor Name</b></td>
                <td><b>Medicine Availability</b></td>
                <td><b>Action</b></td>

            </tr>
            <tr align="center">
                <td>1</td>
                <td><a href="#">06.03-VNS742</a></td>
                <td></td>
                <td>
                    <div class="table-responsive">
                        <input type="text" name="id[]" value="298" hidden=""/>
                        <input type="submit" id="submit-form" class="hidden"/>
                        <a href="#"><input type="submit" value="Update" hidden=""/></a>
                        <input type="text" name="id[]" value="300" hidden=""/>
                        <input type="submit" id="submit-form" class="hidden"/>
                        <a href="#"><input type="submit" value="Update" hidden=""></a>
                        <table class="table" border="">
                            <tbody>
                            <tr>
                                <td><b>S.No.</b></td>
                                <td><b>Medicine Name</b></td>
                                <td><b>Quantity</b></td>
                                <td><b>Unit</b></td>
                                <td><b>Availability</b></td>
                                <td><b>Remark</b></td>
                                <form action="processAvailability.php" method="POST"></form>
                            </tr>
                            <tr align="center">
                                <td>1</td>
                                <td><input type="text" name="medicine_name[]" value="Apml"/></td>
                                <!-- <td>Apml</td> -->
                                <td><input type="text" name="quantity[]" value="15"/></td>
                                <td>
                                    <select name="med_unit_type[]" onchange="CheckColors(this.value);">
                                        <option>Tablet</option>
                                        <option>Strips</option>
                                        <option>Bottle</option>
                                        <option>Tablet</option>
                                        <option>Other</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name="order_number" value="06.03-VNS742" hidden=""/>
                                    <select name="availability[]">
                                        <option value="Not Available">Not Available</option>
                                        <option value="Available">Available</option>
                                        <option value="Not Available">Not Available</option>
                                        <option value="Partially Available">Partially Available</option>
                                        <option value="Confusion">Confusion</option>
                                    </select>
                                </td>

                                <td><input type="text" class="css-input" name="remark[]" value=""
                                           placeholder="Write Remark Here"/></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td>
                    <label for="submit-form">Save</label>
                </td>
                <td><a href="#">Reschedule Order</a></td>
            </tr>

            </tbody>
        </table>
    </div>

Answer 1

我创建了一个fiddle，以便我们可以探索问题。

当我调整 HTML 部分的大小时，我看到所有列都没有问题。您能否提供正在发生的事情的屏幕截图？

你可以试试这个。

.table-responsive {
    width:"100%";
}