Reputation: 17
I have a snippet in my project that involves laying out a grid for a form using CSS tables. However, I am having trouble making it work where it does not take up the full width as I would expect.
.full_width {
width: 100%
}
.table {
display: table;
}
.table_row {
display: table-row;
}
.table_cell {
display: table-cell
}
.wrapper_cont {
width: 48%
}
#cell2 {
padding-left: 4%
}
.label {
display: block
}
.margin_bottom {
margin-bottom: 18px
}
<div class="table full_width">
<div class="table_cell full_width">
<div id="does_something_important">
<div id="does_something_important2">
<form class="table full_width" method="post">
<div class="table_row full_width">
<div class="margin_bottom">
<div id="cell1" class="table_cell wrapper_cont">
<span class="label">Name</span>
<input class="full_width" value="Michael" type="text" />
</div>
<div id="cell2" class="table_cell wrapper_cont">
<span class="label">Email</span>
<input class="full_width" type="text" />
</div>
</div>
<div class="margin_bottom">
<div id="cell1" class="table_cell wrapper_cont">
<span class="label">Name</span>
<input class="full_width" value="Michael" type="text" />
</div>
<div id="cell2" class="table_cell wrapper_cont">
<span class="label">Email</span>
<input class="full_width" type="text" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Updated: https://jsfiddle.net/kq70cghc/7/
Upvotes: 0
Views: 1075
Reputation: 906
Remove the intervening margin_bottom div as it breaks the relationship between table-row and table-cell. And as you can't add margin to a table-row, to add spacing between rows, add the padding to the cells instead:
.full_width{width: 100%}
.table{ display: table;}
.table_row{display: table-row;}
.table_cell{display:table-cell;padding-bottom: 18px;}
.wrapper_cont{width: 48%}
#cell2{padding-left: 4%}
.label{display:block}
<div class="table full_width">
<div class="table_cell full_width">
<div id="does_something_important">
<div id="does_something_important2">
<form class="table full_width" method="post">
<div class="table_row full_width">
<div id="cell1" class="table_cell wrapper_cont">
<span class="label">Name</span>
<input class="full_width" value="Michael" type="text"/>
</div>
<div id="cell2" class="table_cell wrapper_cont">
<span class="label">Email</span>
<input class="full_width" type="text"/>
</div>
</div>
<div class="table_row full_width">
<div id="cell1" class="table_cell wrapper_cont">
<span class="label">Name</span>
<input class="full_width" value="Michael" type="text"/>
</div>
<div id="cell2" class="table_cell wrapper_cont">
<span class="label">Email</span>
<input class="full_width" type="text"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Upvotes: 1
Reputation:
Remove the extra < div> tag that you are using.
<div class="table full_width">
<div class="table_cell full_width">
<div id="does_something_important">
<div id="does_something_important2">
<form class="table full_width" method="post">
<div class="table_row full_width">
<div id="cell1" class="table_cell wrapper_cont">
<span class="label">Name</span>
<input class="full_width" value="Michael" type="text"/>
</div>
<div id="cell2" class="table_cell wrapper_cont">
<span class="label">Email</span>
<input class="full_width" type="text"/>
</div>
</div>
</form>
</div>
</div>
</div>
Hope this should work!
Upvotes: 2