بهم ریخگی جداو ل هنگام خروجی گرفتن در html

سلام
چرا وقتی خروجی تصویر را می گیرم نوشته های داخل جدول بهم می ریزند

کد html:

 <div class="min-body">
    <!-- section1 -->
    <div class="section">
        <div class="input-box">
            <!-- img box -->
            <div class="box-1">
                <img id="preview" src="#" alt="پیش‌نمایش تصویر" style="display:none;">
                <input type="file" id="imageUpload" accept="image/*">
            </div>
            <!-- form input -->
            <div class="box-2">
                <div class="form-group">
                    <input type="text" id="studentName" placeholder="نام ونام خانوادگی">
                </div>
                <div class="form-group">
                    <input type="text" id="className" placeholder="نام کلاس">
                </div>
                <div class="form-group">
                    <input type="text" id="gradeLevel" placeholder="نام پایه ">
                </div>
            </div>

        </div>
    </div>

    <div class="section">
        <div class="table-section">
            <table id="logTable">
                <thead>
                    <tr>
                        <th>موضوع</th>
                        <th>تعداد</th>
                        <th>وضعیت</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>تحویل</td>
                        <td><input class="in" type="number" oninput="updateStatus(this)"></td>
                        <td class="status"></td>
                    </tr>
                    <tr>
                        <td>خواب</td>
                        <td><input class="in" type="number" oninput="updateStatus(this)"></td>
                        <td class="status"></td>
                    </tr>
                    <tr>
                        <td>مطالعه</td>
                        <td><input class="in" type="number" oninput="updateStatus(this)"></td>
                        <td class="status"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="section">
        <div class="table-section">
            <table id="subjectTable">
                <thead>
                    <tr>
                        <th>نام درس</th>
                        <th>نمرات</th>
                        <th>تعداد نمرات کمتر از ۱۸</th>
                        <th>وضعیت</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>درس اول</td>
                        <td>
                            <input class="in" type="number">
                            <input class="in" type="number">
                            <input class="in" type="number">
                            <input class="in" type="number">
                            <input class="in" type="number">
                        </td>
                        <td><input class="in" type="number" oninput="updateSubjectStatus(this)"></td>
                        <td class="status"></td>
                    </tr>
                    <tr>
                        <td>درس دوم</td>
                        <td>
                            <input class="in" type="number">
                            <input class="in" type="number">
                            <input class="in" type="number">
                            <input class="in" type="number">
                            <input class="in" type="number">
                        </td>
                        <td><input class="in" type="number" oninput="updateSubjectStatus(this)"></td>
                        <td class="status"></td>
                    </tr>
                    <!-- سه ردیف دیگر اضافه کنید -->
                </tbody>
            </table>
        </div>
    </div>
   </div> 

<button id="downloadButton" onclick="downloadImage()">دانلود عکس صفحه</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

کد css:

*{
    font-family: Dana-Regular;
}

.hidden {
    display: none;
}

/* bac */
body{
    display: flex;
    justify-content: center;
    background-image: url("../img/baner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    direction: rtl;
    text-align: right;
    padding-top: 400px;
    padding-bottom: 1000px;

}

.section {
    background-color: #0e6c52;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}
/* 1 */
.min-body{
    width: 85%;
}

.input-box{
    display: flex;
    align-items: center;
}

.box-1{
    border: 1px solid #b7873d;
    border-radius: 20px;
    width: 150px;
    height: 150px;
    margin-left: 20px;
}
.box-1, img{
    border-radius: 20px;
    width: 150px;
    height: 150px; 
}
input{
    border-radius: 5px;
    background-color: #eae3d1;
    border: none;
    color: black;
}
.box-2 input{
    padding: 10px;
    width: 200px;
}

th{
    font-family: Dana-Heavy;
}

.in{
    background-color: #0e6c52;
    text-align: center;
}

/* استایل بخش اول */
.input-box img {

    display: block;
    margin-bottom: 10px;
}
.form-group {
    margin-bottom: 10px;
}
/* استایل جدول‌ها */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
table, th, td {
    border: 1px solid #b7873d;
    padding: 8px;
    text-align: center;
}
.status {
    font-weight: bold;
    color: white;
}
/* رنگ‌ها برای وضعیت‌ها */
.status-good {
    background-color: green;
}
.status-average {
    background-color: orange;
}
.status-bad {
    background-color: red;
}

کد js:

  // نمایش پیش‌نمایش تصویر
    document.getElementById('imageUpload').addEventListener('change', function(event) {
        const reader = new FileReader();
        reader.onload = function() {
            const preview = document.getElementById('preview');
            preview.src = reader.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(event.target.files[0]);
    });

    // بروزرسانی وضعیت جدول روزنگار
    function updateStatus(input) {
        const value = parseFloat(input.value);
        const statusCell = input.parentElement.nextElementSibling;

        if (value >= 18) {
            statusCell.textContent = 'خیلی خوب';
            statusCell.className = 'status status-good';
        } else if (value >= 15) {
            statusCell.textContent = 'متوسط';
            statusCell.className = 'status status-average';
        } else {
            statusCell.textContent = 'بد';
            statusCell.className = 'status status-bad';
        }
    }

    // بروزرسانی وضعیت جدول درس‌ها
    function updateSubjectStatus(input) {
        const value = parseInt(input.value);
        const statusCell = input.parentElement.nextElementSibling;

        if (value < 2) {
            statusCell.textContent = 'خیلی خوب';
            statusCell.className = 'status status-good';
        } else if (value < 4) {
            statusCell.textContent = 'متوسط';
            statusCell.className = 'status status-average';
        } else {
            statusCell.textContent = 'بد';
            statusCell.className = 'status status-bad';
        }
    }

    // گرفتن خروجی عکس از صفحه با نام دلخواه
    function downloadImage() {
    const downloadButton = document.getElementById('downloadButton');
    downloadButton.style.display = 'none';  // مخفی کردن دکمه
    const studentName = document.getElementById('studentName').value || 'report';

    html2canvas(document.body, {
        scale: 2, // افزایش وضوح
        width: document.body.scrollWidth, // تنظیم عرض تصویر بر اساس عرض صفحه
        height: document.body.scrollHeight // تنظیم ارتفاع تصویر بر اساس ارتفاع صفحه
    }).then(canvas => {
        const link = document.createElement('a');
        link.href = canvas.toDataURL("image/png");
        link.download = `${studentName}.png`;
        link.click();
        downloadButton.style.display = 'block';  // بازگرداندن دکمه
    });
}

خروجیش این شکلی می شه و بهم می خوره