Geek Answers Handbook

Table titles and scrollable table do not display perfectly

I have two different tables: one for the header data and the second for the scroll body.

<div class="form-horizontal" style="margin-top:15px;">
    <table id="header">
        <thead>
            <tr>
                <th></th>
                ...8x
            </tr>
        </thead>
    </table>
    <div id="table-container" style="overflow-y:auto; max-height:150px;">
    <table class="table" id="table">
        <tbody>
                <tr>
                    <td ></td>
                    ...8x
                </tr>
        </tbody>
    </table>
    </div>
</div>

Now I want to set the width of the tables using jQuery.

$('#table td:nth-child(1)').width('8%');
$('#table td:nth-child(2)').width('8%');
$('#table td:nth-child(3)').width('8%');
$('#table td:nth-child(4)').width('0%');
$('#table td:nth-child(5)').width('8%');
$('#table td:nth-child(6)').width('8%');
$('#table td:nth-child(7)').width('23%');
$('#table td:nth-child(8)').width('23%');
$('#header th:nth-child(1)').width('8%');
$('#header th:nth-child(2)').width('8%');
$('#header th:nth-child(3)').width('8%');
$('#header th:nth-child(4)').width('0%');
$('#header th:nth-child(5)').width('8%');
$('#header th:nth-child(6)').width('8%');
$('#header th:nth-child(7)').width('23%');
$('#header th:nth-child(8)').width('23%');

When the project starts, the title is displayed as (example of the first column):

<th style="width: 10%;"></th>

(expected width: 8%)

and the body is renderd as (example of the first column):

<td style="width: 16%;"></td>

(expected width: 8%)

therefore, the layout does not match. Why is the output output different from the expected one?

( from the question , I installed the probe by setting td to the same width as th with jQuery:

var ths = $('#header').children('thead').children('tr').children('th').length;
    for (counter = ths; counter >= 0; counter--) {
        var headerwidht = $('#header th:nth-child(' + counter + ')').width();
        $('#table td:nth-child(' + counter + ')').width(headerwidht + 'px');
    }

but I'm still wondering why the table appears unexpectedly. )

+4
source share
2 answers

, .css('width' '*%') .width('*%') .

:

$('#header th:nth-child(1)').css('width', '6%');

:

<th style="width: 6%;"></th>

, ,

0

css "table-layout: fixed" ? , td/th .

BTW, 100%, JS . , CSS, / , , , .

, .

0

More articles:


All Articles