Turn html table into pdf using jspdf (Laravel)

Question

Good day. How can I turn my html table into pdf using Jspdf? I'm using laravel and my html table uses the bootstrap css framework. The thing is I'm able to get the pdf downloaded but the structure of the table is disorganize. How do I properly get my pdf based on the exact formatting and of my table:

This is my html table code:

<table class="table table-bordered table-condensed table-responsive" id="test">
    <thead>
        <tr>
            <th scope="row" colspan="1">Name</th>
            <td colspan="5">{{$student->first_name." ".$student->middle_name." ".$student->surname}}</td>
        </tr>
        <tr>
            <th scope="row">Grade/Class</th>
            <td>{{$student->grade->name}}</td>

            <th scope="row">Term</th>
            <td>{{$term->name}}</td>

            <th scope="row">Date</th>
            <td>{{$date->toFormattedDateString()}}</td>
        </tr>
        <tr>
            <th class="text-center" colspan="2">Subject</th>
            <th class="text-center" colspan="4">Score</th>
        </tr>
    </thead>
    <tbody>
        @foreach($scores as $score)
            <tr>
                <td scope="row" colspan="2">{{$score->subject}}</td>
                @if($score->score <= 69)
                    <td style="color: red;" colspan="4">{{$score->score}}</td>
                @else 
                    <td colspan="4">{{$score->score}}</td>
                @endif
            </tr>
        @endforeach
        <tr>
            <th scope="row" colspan="2" class="text-right">Average</th>
            <td colspan="4" class="text-right"><strong>{{$average}}</strong></td>
        </tr>
    </tbody>
</table>

Table pic:

But rather this is the ouput I'm getting from jspdf:

My script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

<script type="text/javascript">   
    $('#download_pdf').click(function () {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#test')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': margins.width, // max width of content on PDF
            'elementHandlers': specialElementHandlers
        },

        function (dispose) {
            // dispose: object with X, Y of the last line add to the PDF 
            //          this allow the insertion of new lines after html
            pdf.save('Test.pdf');
        }, margins);

    });
</script>