CSS 响应式 3 列 Table

Question

我正在尝试制作一个 3 列响应式表单，其中的行可以使用合并单元格，例如 html table。

我遇到的问题运行是因为使用 30/60/90% 宽度的每列边距与其上方的行不对齐。

我在这里创建了一个示例（参见第 1 行和第 3 行）： https://jsfiddle.net/5ktkxres/2/

.formBlock {
    float:left;
    margin: 5px;
    min-width: 200px;
}
.oneFormBlock {
    width: 30%;
}
.twoFormBlock {
    width: 60%;
}

我知道这是一个简单的修复方法，但我找不到解决方案，在此先感谢。

Answer 1

我认为最好的方法是使用 Bootstrap。（我知道这是一个 "lazy" 解决方案）。

Answer 2

我能看到的最快解决方法是将边距更改为 1%，然后将其添加到 .twoformblock 的宽度。像这样：

.formBlock {
  margin: 5px 1%;
}
.twoFormBlock {
  width: 62%;
}

Answer 3

或尝试CSS计算：

.formBlock {
    float:left;
    margin: 5px;
    min-width: 200px;
}
.oneFormBlock {
    width: 30%;
}
.twoFormBlock {
    width: calc(60% + 10px);
}

https://jsfiddle.net/5ktkxres/10/

确保考虑到每个输入每边的边距。如果你有一个 90% 的 threeFormBlock，你将需要添加 20px，因为输入一的右边距，输入二的边距和输入三的左边距。

CSS 响应式 3 列 Table

CSS Responsive 3 Column Table

html

css

responsive-design