显示表格单元格50％宽度不起作用

Question

我正在尝试使用display：table创建一个格式良好的表单，但我遇到了一些问题，似乎无法解决它。

这是我的代码：

.table-container {
  width: 100%;
  margin: 10px auto;
  display: table;
  border-collapse: collapse;
  outline: 1px solid black;
}
.form-row {
  display: table-row;
  border: 1px solid #393939;
  width: 100%;
  float: left;
  border-bottom: 1px solid #393939;
  border-collapse: collapse;
}
.header {
  background-color: yellow;
}
.twenty {
  width: 20%;
}
.twentyfive {
  width: 25%;
}
.thirty {
  width: 33%;
}
.thirty:last-child {
  width: 34%;
}
.fourty {
  width: 40%;
}
.fifty {
  width: 50%;
}
.sixty {
  width: 60%;
}
.seventy {
  width: 70%;
}
.cell {
  display: table-cell;
  padding: 10px 20px;
  border-right: 1px solid #393939;
  vertical-align: middle;
  border-collapse: collapse;
}
.first {
  border-left: 1px solid #393939;
}

<form>
  <div class="table-container">
    <span class="form-row header">Date Solicitant</span>
    <span class="form-row">
		<span class="cell fifty first"><input type="text" placeholder="Nume" id="nume" name="nume" /></span>
        <span class="cell fifty last"><input type="text" placeholder="Prenume" id="prenume" name="prenume" /></span>
    </span>
    <span class="form-row">
		<span class="cell twentyfive first">Tip act de identitate<br /><input type="radio" name="tip-act" value="BI">BI <input type="radio" name="tip-act" value="CI">CI <input type="radio" name="tip-act" value="Pasaport">Pasaport</span> 
        <span class="cell twentyfive"><input type="text" name="serie-act" id="serie-act" placeholder="Serie" style="width: 25%";/> <input type="text" name="numar-act" id="numar-act" placeholder="Numar" /></span>
        <span class="cell twentyfive"><input type="text" name="eliberat" id="eliberat" placeholder="Eliberat de" /></span>
        <span class="cell twentyfive last"><input type="date" name="eliberat-data" id="eliberat-data" placeholder="la data de (zz/ll/aaaa)" /></span>
    </span>
    <span class="form-row">

		<span class="cell thirty first"><input type="text" name="cnp" id="cnp" placeholder="Cod Numeric Personal" /></span>
        <span class="cell thirty"><input type="text" name="loc-nastere" id="loc-nastere" placeholder="Locul Nasterii" /></span>
        <span class="cell thirty">Starea Civila:<br /><input type="radio" name="stare-civila" value="Casatorit(a)">Casatorit(a) <input type="radio" name="stare-civila" value="Necasatorit(a)">Necasatorit(a) <input type="radio" name="stare-civila" value="Divortat(a)">Divortat(a) <input type="radio" name="stare-civila" value="Vaduv(a)">Vaduv(a) </span> 
    </span>

  </div>
</form>

我的问题是，尽管第2行和第3行显示正常，但占用整个行空间的单元格，在第1行，单元格只占用了行的一小部分。这可能是我忽略的一些简单的事情，但我一直试图解决它一段时间，一双新眼睛可以帮助。

提前致谢！

Answer 1

问题是你在班级.form-row中有一个浮动。您需要在每个单元格中拥有该属性，并添加一个类box-sizing: border-box。因此，单元类将具有以下CSS：

.cell {
  display: table-cell;
  padding: 10px 20px;
  border-right: 1px solid #393939;
  vertical-align: middle;
  border-collapse: collapse;
  float:left;
  box-sizing:border-box;
}

JSFiddle Here：http://jsfiddle.net/7m879c5L/

Answer 2

得到它。

想出来。您需要从display: table移除table-container，然后将form-row从table-row更改为table。然后，然后细胞的宽度恰当地占据了行的空间。

看一下片段。

.table-container {
  width: 100%;
  margin: 10px auto;
  /* display: table; */
  border-collapse: collapse;
  outline: 1px solid black;
}
.form-row {
  /* display: table-row; */
  display: table;
  border: 1px solid #393939;
  width: 100%;
  float: left;
  border-bottom: 1px solid #393939;
  border-collapse: collapse;
}
.header {
  background-color: yellow;
}
.twenty {
  width: 20%;
}
.twentyfive {
  width: 25%;
}
.thirty {
  width: 33%;
}
.thirty:last-child {
  width: 34%;
}
.fourty {
  width: 40%;
}
.fifty {
  width: 50%;
}
.sixty {
  width: 60%;
}
.seventy {
  width: 70%;
}
.cell {
  display: table-cell;
  padding: 10px 20px;
  border-right: 1px solid #393939;
  vertical-align: middle;
  border-collapse: collapse;
}
.first {
  border-left: 1px solid #393939;
}

<form>
  <div class="table-container">
    <span class="form-row header">Date Solicitant</span>
    <span class="form-row">
		<span class="cell fifty first"><input type="text" placeholder="Nume" id="nume" name="nume" /></span>
        <span class="cell fifty last"><input type="text" placeholder="Prenume" id="prenume" name="prenume" /></span>
    </span>
    <span class="form-row">
		<span class="cell twentyfive first">Tip act de identitate<br /><input type="radio" name="tip-act" value="BI">BI <input type="radio" name="tip-act" value="CI">CI <input type="radio" name="tip-act" value="Pasaport">Pasaport</span> 
        <span class="cell twentyfive"><input type="text" name="serie-act" id="serie-act" placeholder="Serie" style="width: 25%";/> <input type="text" name="numar-act" id="numar-act" placeholder="Numar" /></span>
        <span class="cell twentyfive"><input type="text" name="eliberat" id="eliberat" placeholder="Eliberat de" /></span>
        <span class="cell twentyfive last"><input type="date" name="eliberat-data" id="eliberat-data" placeholder="la data de (zz/ll/aaaa)" /></span>
    </span>
    <span class="form-row">

		<span class="cell thirty first"><input type="text" name="cnp" id="cnp" placeholder="Cod Numeric Personal" /></span>
        <span class="cell thirty"><input type="text" name="loc-nastere" id="loc-nastere" placeholder="Locul Nasterii" /></span>
        <span class="cell thirty">Starea Civila:<br /><input type="radio" name="stare-civila" value="Casatorit(a)">Casatorit(a) <input type="radio" name="stare-civila" value="Necasatorit(a)">Necasatorit(a) <input type="radio" name="stare-civila" value="Divortat(a)">Divortat(a) <input type="radio" name="stare-civila" value="Vaduv(a)">Vaduv(a) </span> 
    </span>

  </div>
</form>