Mindy Chang
Mindy Chang

Reputation: 17

CSS table cell inputs not taking full width

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

Answers (2)

rbginge
rbginge

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

user2042292
user2042292

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

Related Questions