display table-cell 50% width not working

Question

I'm trying to create a nicely formatted form using display: table, but I ran into a bit of a problem and can't seem to work it out.

Here's my code:

.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>

My problem is that, although the 2nd and 3rd rows are displayed ok, the cells taking up the entire row space, on the 1st row, the cells only take a small part of the row. It's probably some simple thing I'm overlooking, but I've been trying to solve it for a while now and a fresh pair of eyes could help.

Thanks in advance!

Answer 1

Got It.

Figured it out. You need to remove display: table from the table-container and change the form-row from table-row to table. Then, then widths of the cells properly take up the space of the row.

Take a look at the snippet.

.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>