-1

読んでくれてありがとう。

私はこのhtmlフラグメントを持っています

<div class="table">
    <!--1st row --->
    <div class="cell_short table_cell">1</div>
    <div class="cell_medium table_cell">Nickname</div>
    <div class="cell_short table_cell">-</div>
    <div class="clear"></div>
    <!--2nd row --->
    <div class="cell_short table_cell">2</div>
    <div class="cell_medium table_cell">Nickname</div>
    <div class="cell_short table_cell">-</div>
    <div class="clear"></div>
    <!--3rd row --->
    <div class="cell_short table_cell">3</div>
    <div class="cell_medium table_cell">Nickname</div>
    <div class="cell_short table_cell">-</div>
    <div class="clear"></div>
    <!--4th row --->
    <div class="cell_short table_cell">4</div>
    <div class="cell_medium table_cell">Nickname</div>
    <div class="cell_short table_cell">-</div>
    <div class="clear"></div>
    <!--5th row --->
    <div class="cell_short table_cell">5</div>
    <div class="cell_medium table_cell">Nickname</div>
    <div class="cell_short table_cell">-</div>
    <div class="clear"></div>
    <!--6th row --->
    <div class="cell_short table_cell">6</div>
    <div class="cell_medium table_cell">Nickname</div>
    <div class="cell_short table_cell">-</div>
    <div class="clear"></div>
    <!--7th row --->
    <div class="cell_short table_cell">7</div>
    <div class="cell_medium table_cell">Nickname</div>
    <div class="cell_short table_cell">-</div>
    <div class="clear"></div>
    <!--8th row --->
    <div class="cell_short table_cell">8</div>
    <div class="cell_medium table_cell">Nickname</div>
    <div class="cell_short table_cell">-</div>
    <div class="clear"></div>
</div>​

そしてこのスタイル

.table {
border-spacing: 2px 1px;
background-color: black;
width: 316px;
}
.table_cell {
height: 30px;
line-height: 30px;
position: relative;
display: table-cell;
background-color: red;
}
.cell_short {
width: 80px;
text-align: center;
}
.cell_medium {
width: 150px;
text-align: center;
}​

jsフィドル

ご覧のとおり、複数の行を持つテーブルがあります。行のすべてのセルには、2px 1px の境界線の間隔があります。jquery を使用して DOM から行を削除しようとすると、行全体が削除されますが、境界線の間隔は 2px 1px のままです。複数の行を削除すると、border-spacing: 2px 1px が蓄積され、大きなスペースが残ります。これが些細なことかどうかはわかりませんが、相対的なものを見つけることができませんでした。

なぜこれが起こっているのか、誰かが私に光を当てることができますか?

4

1 に答える 1

0

JavaScriptスクリプトを提供しないと、問題を推測するのが難しくなります.

とにかく、div のトーンを作成する代わりにテーブルを作成しないのはなぜですか?

あなたの目標がテーブルを取得することである場合は、テーブルを使用してください。また、css の調整もはるかに簡単になります!! また、後で JavaScript を使用して簡単に変更できます。

テーブルを学ぶ : http://www.quackit.com/html/html_table_tutorial.cfm

テーブルを作成したら、各行に異なる ID を設定するだけで ( <tr id=row_numb>...</tr>)、javascript を使用して必要な行を削除できます。

その結果、バグがなくなり (css は常に続きます)、よりクリーンなコードが得られます。

于 2012-11-16T14:54:28.713 に答える