防止表格尺寸变形答案

【问题标题】：Prevent size distortion of table防止表格尺寸变形
【发布时间】：2018-09-02 07:23:50
【问题描述】：

我创建了一个像素艺术制作工具，允许用户根据自己的喜好选择网格大小。我添加了以下 CSS 以将其转换为两列布局（以及我的 HTML 中的 div），以便在网格左侧显示面板：

.column {
  float: left;
  width: 35%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

您可以查看我的CodePen 以供参考。

但是，默认的 25 x 25 网格高于宽度。我尝试摆弄width: 35%;，但每个结果都被扭曲了。我怎样才能使它成为一个完美的正方形？

【问题讨论】：

【解决方案1】：

这是因为您的表格父类有width:35%，这意味着如果表格内容超出，table 将采用父宽度的100%，这将覆盖td 宽度，但如果表格内容不超过@ 987654329@ 宽度会起作用。

因此您需要在td 中使用min-width: 20px 和box-sizing: border-box; 而不是width。

您可以找到更多信息here

td {
  min-width: 20px;
  box-sizing: border-box;
}

【讨论】：

【解决方案2】：

将box-sizing: border-box; 添加到您的 td 元素中，它会使边框与您的宽度和高度保持一致。

td {
  width: 20px;
  box-sizing:border-box;
}

当我检查您的 codePen 时，您的 tds 为 23x20，因此您的网格尺寸存在差异。

【讨论】：

我很困惑——在我的文件中没有看到任何说 23 的内容。
这是因为没有box-sizing: border-box;，元素的width会添加边框、边距和内边距。所以当你要求一个 20px 宽和 1px 边框的元素时，你最终会得到一个 22px 宽的元素（20px+1px 右边框+1px 左边框）。对于box-sizing: border-box;，它们会被考虑在内，一个 20 像素的元素将是 20 像素宽（18+1+1 像素）。
明白了，谢谢。但是，在仔细研究之后，使用box-sizing: border-box 时似乎实际上没有考虑边距；只是填充和边框。
真的！我急忙回答，我的错。正如你所说，box-sizing: border-box; 只考虑内容、内边距和边框。