Question

感谢阅读。

我有这个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;
}

jsFiddle

正如您所看到的，我有一个包含多行的表格。一行中的每个单元格都有边距：2px 1px。当我试图从DOM中删除一行时，请使用jquery，删除整行，但保持边框间距：2px 1px。如果我删除几行边框间距：2px 1px累积并留下一个大空间。我不知道这是否微不足道，但我无法找到任何亲戚。

任何人都可以告诉我为什么会这样吗？

Answer 1

如果没有给我们提供javascript脚本，就很难猜到这个问题。

无论如何，你为什么不创建一个表而不是创建div的音调？

如果您的目标是获得一张桌子，请使用表格。调整你的CSS也会容易得多！之后使用javascript更容易修改。

学习表格：http://www.quackit.com/html/html_table_tutorial.cfm

一旦你有了表格，只需在每行（<tr id=row_numb>...</tr>）上添加不同的ID，然后使用javascript，您就可以删除想要的行。

结果，您的错误将消失（css将始终跟随），并且您将拥有更清晰的代码。

样式边框间距即使在元素移除后也会累积间距和边框

1 个答案: