Making the textarea to take up full width in css table layout - html

Question

I'm having trouble making a form using tables. I'm trying to make the <textarea> comment box row take up the full width. The problem is unknown to me, as I don't know why it won't work.
.full_width {
width: 100%
}
.table {
display: table; width: 100%;
}
.table_row {
display: table-row; width: 100%;
}
.table_cell {
display: table-cell
}
.label {
display: block
}
.two_cell
{
width: 48%;
}
#company_cell
{
padding-left: 4%;
}
.table_cell {
padding-bottom: 18px
}
<form class="table" method="post">
<div class="table_row">
<div class="table_row full_width">
<div class="table_cell">
<span>Name</span>
<input name="name" class="full_width" type="text" value=""/>
</div>
<div class="table_cell">
<span>Company</span>
<input name="company" class="full_width" type="text" value=""/>
</div>
</div>
</div>
<div class="table_row">
<div class="table_row full_width">
<div class="table_row">
<span>Comment</span>
</div>
<div class="table_row full_width">
<textarea name="comment" class="full_width" value="SEND"></textarea>
</div>
</div>
</div>
</form>
Here is the fiddle I'm playing around with https://jsfiddle.net/bpo7tujp/

Answer 1

The nature of your nested markup isn't wholly valid- in addition the logic conflicts somewhat.
Solution 1: table-caption
What you are effectively after is a CSS version of colspan, you can achieve this by changing your HTML to that below, and implementing table-caption
.full_width {
width: 100%
}
.table {
display: table;
width: 100%;
}
.table_row {
display: table-row;
width: 100%;
}
.table_cell {
display: table-cell
}
.label {
display: block
}
.two_cell {
width: 48%;
}
#company_cell {
padding-left: 4%;
}
.table_cell {
padding-bottom: 18px
}
.table_caption {
display: table-caption;
caption-side: bottom;
}
<form class="table" method="post">
<div class="table_row">
<div class="table_cell">
<span>Name</span>
<input name="name" class="full_width" type="text" value="" />
</div>
<div class="table_cell">
<span>Company</span>
<input name="company" class="full_width" type="text" value="" />
</div>
</div>
<div class="table_caption">
<span>Comment</span>
<br />
<textarea name="comment" class="full_width" value="SEND"></textarea>
</div>
</form>
Solution 2 (advised): No tables
With that said, you would be far better not using tables for layouting, as evidenced by how simple it is to create the same:
.column {
float: left;
width: 50%;
}
input,
textarea {
width: 100%;
}
<div class="columns">
<div class="column">
<span>Name</span>
<input name="name" class="full_width" type="text" value="" />
</div>
<div class="column">
<span>Company</span>
<input name="company" class="full_width" type="text" value="" />
</div>
</div>
<span>Comment</span>
<textarea name="comment" class="full_width" value="SEND"></textarea>