Html CSS“；显示：表格单元格”；对于列-使第一列的宽度与最宽的字相同

我有几种不同的形式，它们都是使用display来设计的：表格单元格，如本小提琴中一种形式的示例所示

我希望第一列作为标签，是最长文本的宽度，在本例中是文本确认密码。因此，带有标签文本用户名、电子邮件、公司和密码的所有“框”应与确认密码框的宽度相同

所有这些文本几乎都应该是静态的，因此如果我可以将列设置为特定的宽度，并在以后文本更改时手动更改它，就足够了。但是，如果宽度可以自我调整，那么如果我将来更改文本，第一列中所有项目的宽度都会自动调整，那就更好了。我已经尝试了很多东西，我甚至记不清它们的全部，但是我确实在CSS中留下了一个注释掉的样式，让我了解我尝试过的东西

HTML:

。您的表结构几乎完成了，因此这里有一些小的调整来创建所需的表行。有一个名为.table样式的新包装器div，带有

display:table

。因为您已经有了表结构，所以我在.entry组中使用了

display:table row

<代码>显示：表格单元格仍在.label组和.form控件上使用

.table-style {
    display:table;
}

.entry-group {
  display:table-row;
}


.label-group, .form-control {
  display: table-cell;
}

---

注意：如果您对输入标记上的表格单元格有问题，您可能需要阅读此

。你知道现在如何在每一行之间增加间距吗？使用边框间距：3px；在桌子上。桌子风格。它与边框塌陷：分离；一起工作；。我更新了JSFIDLE。

.entry-group {
  position: relative;
  display: table;
  border-collapse: separate;
}

.entry-group .form-control {
  width: 100%;
  margin-bottom: 0;
}

.label-group,
.entry-group .form-control {
  display: table-cell;
}

.label-group {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

/* .label-group.col {
    width: 20px;
} */

.form-control {
  display: block;
  height: 24px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.table-style {
    display:table;
}

.entry-group {
  display:table-row;
}


.label-group, .form-control {
  display: table-cell;
}