Выравнивание thead в таблице с пользовательским JS / Jquery выключен в IE

Question

Выравнивание thead в таблице с пользовательским JS / Jquery выключен в IE

0

В Chrome настройки идеальны. Когда дело доходит до IE, выравнивание становится ячменным.
У меня есть рабочий образец JSFiddle.

Но, похоже, IE не любит запускать код в скрипаче. Возможно, вам придется вырезать и вставить код в свой собственный документ.

<table class='fix-header'>
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Favorite Color</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Jim James John</td>
            <td>00001</td>
            <td>BlueBlueBlueBlueBlueBlueEVEN LONGER!</td>
        </tr>
        <tr>
            <td>Sue</td>
            <td>00002</td>
            <td>Red</td>
        </tr>
        <tr>
            <td colspan="2">Sue</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>Barb</td>
            <td>00003</td>
            <td>Green</td>
        </tr>
        <tr>
            <td colspan="3">Jim</td>
        </tr>
    </tbody>
</table>

CSS:

.fix-header, table, thead, tbody, td, th{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;         
}

table {border-collapse: collapse;}
.fix-header thead {display: block;}

.fix-header tbody{
    display: block;
    height: 262px;
    overflow: auto;
    overflow-x: hidden;
}

.fix-header td, .fix-header th {
  border: 1px solid #999;
  padding: 8px;
  text-align: left;
}

.fix-header tbody tr:nth-child(even){background-color: #c5eff9;}

.fix-header tbody tr td[colspan="3"]{background-color: red;}

JS:

var padding = window.navigator.userAgent.indexOf("MSIE ") > 0 ? 17.5 : 18;

$.each($('.fix-header'), function(){
    var table = this;
    $.each($('tbody tr:first', this).children(), function(index){
        $('thead th:nth-child('+(index+1)+')', table).width($(this).width()+padding);
    });
});

Austin Lovell 20 март 2014, в 21:17

Источник

Теги:

jquery

html

css

table

1 ответ

Ещё вопросы

Austin Lovell · Answer 1 · 2014-03-20T19-23-00.000Z

Оказывается, проблема заключается в том, что.width() не возвращает номер экстента. Вместо этого я использую это сейчас:

$(this)[0].getBoundingClientRect().width

Вот где я нашел решение своего ответа: как заставить jQuery не округлять значение, возвращаемое.width()?

Вот весь код.

<table class='fix-header'>
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Favorite Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jim James John</td>
            <td>00001</td>
            <td>BlueBlueBlueBlueBlueBlueEVEN LONGER!</td>
        </tr>
        <tr>
            <td>Sue</td>
            <td>00002</td>
            <td>Red</td>
        </tr>
        <tr>
            <td colspan="2">Sue</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>Barb</td>
            <td>00003</td>
            <td>Green</td>
        </tr>
        <tr>
            <td colspan="3">Jim</td>
        </tr>
        <tr><td>Jim</td><td>00001</td><td>Blue</td></tr>
        <tr><td>Jim</td><td>00001</td><td>Blue</td></tr>
        <tr><td>Jim</td><td>00001</td><td>Blue</td></tr>
        <tr><td>Jim</td><td>00001</td><td>Blue</td></tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Total</th>
        </tr>
    </tfoot>
</table>

CSS:

 .fix-header, table, thead, tfoot,tbody, td, th{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;         
}

table {border-collapse: collapse;}
.fix-header thead, .fix-header tfoot {display: block;}

.fix-header tbody{
    display: block;
    height: 262px;
    overflow: auto;
    overflow-x: hidden;
}

.fix-header td, .fix-header th {
  border: 1px solid #999;
  padding: 8px;
  text-align: left;
}

.fix-header tbody tr:nth-child(even){background-color: #c5eff9;}

.fix-header tbody tr td[colspan="3"]{background-color: red;}

JS:

$.each($('.fix-header'), function(){
    var table = this;
    $.each($('tbody tr:first', this).children(), function(index){
        var tdWidth = $(this)[0].getBoundingClientRect().width;
        $('thead th:nth-child('+(index+1)+')', table).width(tdWidth);
        $('tfoot th:nth-child('+(index+1)+')', table).width(tdWidth);
    });
});

Надеюсь, это поможет кому-то еще!