Question

在Chrome中，对齐非常完美。对于IE来说，对齐几乎没有我有working sample on JSFiddle。

但似乎IE不喜欢在fiddler中运行代码。您可能需要将代码剪切并粘贴到自己的文档中。

<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);
    });
});

Answer 1

原来问题是.width（）不会返回提取数字。相反，我现在正在使用它：

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

这是我找到解决方案的答案： How to make jQuery to not round value returned by .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);
    });
});

希望这也有助于其他人！

表中的thead与IE中的自定义JS / Jquery关闭

1 个答案: