iT邦幫忙

0

jQuery tr同步高度問題

我想要同步兩邊表格的高度,在除了IE以外的瀏覽器都work,不知道為什麼IE會變過高

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tr</title>
<style>
body {
    font-size: 12px;
}
table {
    border-collapse: collapse;
}
td {
    border: 1px solid gray;
    padding: 5px;
}
.box1 {
    position: absolute;
    left: 11px;
    top: 50px;
}
.box2 {
    position: absolute;
    left: 110px;
    top: 50px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(function() {
    function synchronizeHeight() {
        $('#table2 tr').each(function($i) {
            $('#table1 tr:eq('+$i+')').height($(this).height());
        });
    }
    
    $('#btnSync').click(function() {
        synchronizeHeight();
        return false;
    });
});
</script>


<input type="button" id="btnSync" value="synchronize height" />
<div class="box1">table1
    <table width="100" id="table1">
        <tr>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
        </tr>
    </table>
</div>
<div class="box2">
table2
    <table width="100" id="table2">
        <tr>
            <td>test</td>
        </tr>
        <tr>
            <td>test<br />
            test</td>
        </tr>
        <tr>
            <td>test<br />
            test<br />
            test</td>
        </tr>
    </table>
</div>

2 個回答

2
qileroro
iT邦新手 4 級 ‧ 2010-08-17 08:57:42
最佳解答

IE下用height()得到tr的高度是包括补白和边框的高度

2
godstamp
iT邦新手 3 級 ‧ 2010-08-14 13:35:40

你這段原始碼,我直接在 IE8 上面試,並沒有問題

chan15 iT邦新手 5 級 ‧ 2010-08-15 15:26:41 檢舉

<td> </td>我猜你複製的時候變成<td></td>
加上內容就有差了<td>1</td>

我要發表回答

立即登入回答