jPagesに問題があります。テーブルがあり、jPages が提供するページネーションを使用したいと考えています。与えられたページの例から行ごとの fadeTo 効果を見たとき、私は自分のテーブルに同じものを持っていることに決めました. そうすることで、私はこれらの問題に直面しました：
- border-collapsed を使用すると、背景色が一瞬消えて、セルのコンテンツのすぐ周囲にのみ残ります。その後、背景色が再び表示されます。
代わりに border-separate を使用し、border-spacing 0px を使用し、行要素の代わりにセル要素に行スタイルを追加し、行スタイルを変更して、上部ではなく上部にのみ境界線があるようにすることで、この問題を解決しました。下。
これにより、次の問題が発生します。IE9 では、行がフェードする前に行間の境界線が表示されます。(Firefox ではそうではありません) 行がフェードすると、1 つおきの境界線が消えます (rowstyle1 の上部境界線)。rowstyle2 で上下の境界線を使用し、rowstyle1 を境界線なしで残して、境界線が消える問題を解決しました。ただし、境界線は依然として行のコンテンツの前に表示されます。
最後の問題: Border-collapse: collapsed を使用していないため、IE7 で列間に白い境界線が表示されます。(IE8 にはありません)。さらに、IE7、IE8、および Opera では、fadeTo 効果はありません。
テーブルタグの代わりに div を使用することで、問題はありません! しかし、意味的に正しくないことはわかっています。
私の質問は次のとおりです。最後の問題を解決するにはどうすればよいですか? また、テーブル タグを使用すると、なぜこれらの問題が発生するのでしょうか。そして、私が調査したことの説明が見つからないため、私のソリューションが機能する理由を誰かが知っているかもしれません.
現在のコードは次のとおりです。
<script>
$(document).ready(function() {
$(function(){
$("div.holder").jPages({
containerID : "torsch",
perPage: 40
});
});
});
</script>
CSS:
<style>
.rowstyle2 {
height:25px;
border-left: 0px none;
border-right:0px none;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background: url("/images/test.png") repeat-x scroll 0% 0% transparent;
vertical-align:middle;
}
.rowstyle1 {
background-color:#FFFFFF;
height:25px;
border-top: 0px none;
border-bottom: 0px none;
border-left:0px none;
border-right:0px none;
vertical-align:middle;
}
table {
border-spacing: 0px;
}
</style>
HTML:
<div class="holder"></div>
<table>
<thead>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</thead>
<tbody id="torsch">
<tr>
<td class="rowstyle2">1</td>
<td class="rowstyle2">45</td>
<td class="rowstyle2">4546</td>
</tr>
<tr>
<td class="rowstyle1">1</td>
<td class="rowstyle1">45</td>
<td class="rowstyle1">4546</td>
</tr>
<tr>
<td class="rowstyle2">1</td>
<td class="rowstyle2">45</td>
<td class="rowstyle2">4546</td>
</tr>
<tr>
<td class="rowstyle1">1</td>
<td class="rowstyle1">45</td>
<td class="rowstyle1">4546</td>
</tr>
<tr>
<td class="rowstyle2">1</td>
<td class="rowstyle2">45</td>
<td class="rowstyle2">4546</td>
</tr>
</tbody>
</table>