Question

我有一个框网格，用户可以在其中设置行数/列数。我希望整体大小保持完全相同，并相应地更改每个元素的大小。在javascript中创建表时，我将每个元素的宽度和高度设置为320px / number_of_columns。但是，当用户更改列数时，整体大小不会保持不变。

我将元素的边距，填充和边框大小设置为0，这样就不会增加总大小。我也玩过树上更高的元素属性（比如标签本身）无济于事。

最奇怪的是，当我添加框时，表并不总是变得更大，并且在列数/行数和总大小之间的关系中没有明显的模式。当我测试出不同的选项时，总尺寸总是大致相同，但是会略微变大或变小，或者尺寸略有不同。

我很困惑。任何人都可以了解正在发生的事情吗？

以下是相关的JavaScript代码：

var box_size = 320/size
for (var r=0; r<size; r++) {
    $('table').append("<tr></tr>");
};
for (var c=0; c<size; c++) {
    $('tr').append("<td class='grid' width='" + box_size + "px' height='" + box_size + "px'></td>");

和CSS代码：

#table_grid {
    margin: 0 auto;
    border-spacing: 0;
    border-collapse: collapse;
}

.grid {
   background-color: #eeeeee;
    margin: 0; padding: 0; border: 0;

这是一个link to the entire project on jsfiddle所以人们可以看到我在说什么。

Answer 1

我认为这是浮动像素问题。当结果是一个浮点数时，它的整数就是像素。例如，如果列数为9，则结果为-35.55555555555556px，相当于36px。要跳过此问题，您可以使用％而不是像素。但是你必须先设置表格高度和宽度。

var box_size = 100/size
for (var r=0; r<size; r++) {
    $('table').append("<tr></tr>");
};
for (var c=0; c<size; c++) {
    $('tr').append("<td class='grid' width='" + box_size + "%' height='" + box_size + "%'></td>");

ans css

#table_grid {
    margin: 0 auto;
    border-spacing: 0;
    border-collapse: collapse;
    width:350px;
    height:350px;
}

看看我的例子 - http://jsfiddle.net/2wrtaxdy/3/

在更改表中元素的数量时保持表的大小相同

1 个答案: