防止表的尺寸变形

Question

我创建了一个像素艺术品制造商，允许用户选择他或她喜欢的网格尺寸。我添加了以下CSS将其转换为两列布局（以及我的HTML中的div），以便在网格左侧显示面板：

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

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

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

但是，默认的25 x 25网格比它宽。我试图摆弄width: 35%;，但每个结果都被扭曲了。我怎样才能使它成为一个完美的广场？

Answer 1

这是因为你的表父类有BEGIN test_proc( TO_DATE( '01/01/2018', 'MM/DD/YYYY' ) ); END; ，这意味着如果超出表格内容，width:35%将占用父宽度的table，这将覆盖100%宽度，但是如果未超出表格内容，td宽度将起作用。

因此，您需要在td中使用min-width: 20px代替box-sizing: border-box;代替width。

您可以找到更多信息here

td

<强> Updated Codepen

Answer 2

在您的td元素中添加box-sizing: border-box;，它会根据您的宽度和高度检查边框。

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

当我检查你的codePen时，你的tds是23x20，因此网格尺寸不同。