Display table-cell 50% width doesn't work
I am trying to create a nicely formatted form using display: table, but I am facing some problem and cannot handle it.
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 fine, the cells take up all the space of the rows, in the first row the cells only take up a small part of the row. This is probably the simplest thing I miss, but I've been trying to solve it for a while and a fresh pair of eyes might help.
Thanks in advance!
source to share
The problem is you have floats in the class .form-row
. You must have this property in every cell and add a class box-sizing: border-box
. So the cell class will have the following 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/
source to share
Got It.
Found it out. You need to remove display: table
from table-container
and change form-row
from table-row
to table
. Then, then the cell widths correctly occupy the line space.
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>
source to share