使textarea占用css表格布局的全宽

Question

我在使用表格制作表单时遇到问题。我正在尝试使<textarea>注释框行占据整个宽度。我不知道这个问题，因为我不知道为什么它不起作用。

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

这是我正在玩https://jsfiddle.net/bpo7tujp/

的小提琴

Answer 1

嵌套标记的性质并非完全有效 - 此外逻辑有些冲突。

解决方案1：table-caption

您实际使用的是colspan的CSS版本，您可以通过将HTML更改为以下内容并实现table-caption

来实现此目的

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

解决方案2（建议）：没有表格

说到这一点，你最好不要使用表格进行布局，这可以通过创建相同的表单来证明：

＆＃13;

＆＃13;

.column {
  float: left;
  width: 50%;
}
input,
textarea {
  width: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;