CSS 表格单元格输入未占用全宽答案

【问题标题】：CSS table cell inputs not taking full widthCSS 表格单元格输入未占用全宽
【发布时间】：2015-08-04 13:59:48
【问题描述】：

我的项目中有一个 sn-p，它涉及使用 CSS 表格为表单布置网格。但是，在它没有像我预期的那样占据整个宽度的情况下，我无法让它工作。

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

更新：https://jsfiddle.net/kq70cghc/7/

【问题讨论】：

有什么理由使用带有表格属性的 div 而不是表格本身？
我更容易为它们设计样式。如果这很重要，还有个人喜好。
尝试 full_width 100% !important;
@Alex 那肯定行不通……而且它也不是有效的 CSS，
表格行 div 和表格单元格 div 之间有多余的 div。尝试删除：jsfiddle.net/1bemsj2h

标签： html css formatting

【解决方案1】：

删除中间的 margin_bottom div，因为它破坏了 table-row 和 table-cell 之间的关系。并且由于您无法为表格行添加边距，因此要在行之间添加间距，请将填充添加到单元格中：

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

【讨论】：

【解决方案2】：

删除您正在使用的额外

标签。

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

希望这应该有效！

【讨论】：

我已经更新了问题。我实际上需要那个 div 来添加边距底部。除非有一种方法我可以在没有那个 div 的情况下节省利润。我无法让边框折叠工作并将其正确添加到 table_row；