title: Why will my HTML table not display correctly
body: <p>I have a simple example of an html table yet it will not display correctly and I do not understand why.</p>
  
  <p>code for the table:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;form id="testform" data-parsley-validate&gt;
      &lt;div class="row"&gt;
          &lt;input class="form-control typeahead" name="customerSearch" type="text"
                 placeholder="Customer Search:" autofocus="on"
                 autocomplete="off" spellcheck="off" data-open="open" data-close="close" 
                 data-select="select" data-autocomplete="autocomplete"
                 data-source="customersTypeAhead"/&gt;       
  
          &lt;button type="button" class="btn btn-warning"&gt;Clear&lt;/button&gt;
          &lt;button type="button" class="btn btn-success"&gt;Create&lt;/button&gt;
  
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-4 smPadding"&gt;
              &lt;br&gt;
              &lt;!-- Customr Contact info and factoring company info --&gt;
              &lt;input class="form-control box-size" type="text" name="customerName" placeholder="Customer:"
                  data-parsley-trigger="change" minlength="6" required /&gt;
              &lt;input class="form-control  box-size" type="text" name="customerAddress" placeholder="Address:"
                  data-parsley-trigger="change" minlength="6" required /&gt;
  
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input class="form-control box-size" type="text" name="customerSuite" placeholder="Suite:"  /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input class="form-control box-size" type="text" name="customerCity" placeholder="City:"
                              data-parsley-trigger="change" minlength="3"  required /&gt;        
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input class="form-control box-size" type="text" name="customerState" placeholder="State/Prov:"
                              data-parsley-trigger="change" minlength="2" maxlength="2" required /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input class="form-control box-size" type="text" name="customerZip" placeholder="Zip/Postal:"
                              data-parsley-trigger="change" minlength="5" required /&gt;                 
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
              &lt;input class="form-control box-size" type="text" name="customerPhone1" placeholder="Phone 1:"
                  data-parsley-trigger="change"  minlength="10" required /&gt;
  
              &lt;input class="form-control box-size" type="text" name="customerPhone2" placeholder="Phone 2:"
                  data-parsley-trigger="change"  minlength="10"/&gt;
  
              &lt;input class="form-control box-size" type="text" name="customerFax" placeholder="Fax:"
                  data-parsley-trigger="change" minlength="10"/&gt;      
  
              &lt;input type="checkbox" name="customerFactorInvoices"  {{isFactoredCheckAnswer}}&gt; Does Company Use Invoice Factoring?&lt;br&gt;
  
              {{#if isFactoredCheck}}
                  &lt;input class="form-control box-size" type="text" name="factoringName" placeholder="Customer:"
                      data-parsley-trigger="change"  minlength="6" {{factorRequired}}/&gt;
  
                  &lt;input class="form-control  box-size" type="text" name="factoringAddress" placeholder="Address:"
                      data-parsley-trigger="change"  minlength="6" {{factorRequired}}/&gt;
  
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input class="form-control box-size" type="text" name="factoringSuite" placeholder="Suite:"
                                  data-parsley-trigger="change"  /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input class="form-control box-size" type="text" name="factoringCity" placeholder="City:"
                                  data-parsley-trigger="change" minlength="3" {{factorRequired}} /&gt;       
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input class="form-control box-size" type="text" name="factoringState" placeholder="State/Prov:"
                                  data-parsley-trigger="change" minlength="2" maxlength="2" {{factorRequired}} /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input class="form-control box-size" type="text" name="factoringZip" placeholder="Zip/Postal:"
                                  data-parsley-trigger="change" minlength="5" {{factorRequired}} /&gt;                   
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  
                  &lt;input class="form-control box-size" type="text" name="factoringPhone1" placeholder="Phone 1:"
                      data-parsley-trigger="change" minlength="10" /&gt;
  
                  &lt;input class="form-control box-size" type="text" name="factoringPhone2" placeholder="Phone 2:"
                      data-parsley-trigger="change"  minlength="10"/&gt;
  
                  &lt;input class="form-control box-size" type="text" name="factoringFax" placeholder="Fax:"
                      data-parsley-trigger="change"  minlength="10"/&gt;         
  
                  &lt;input class="form-control box-size" type="text" name="factoringEmail" placeholder="Email:"
                      data-parsley-trigger="change"    /&gt; 
              {{/if}}
          &lt;/div&gt;
  
          &lt;div class="col-md-4 smPadding"&gt;
              &lt;br&gt;
              &lt;input class="form-control box-size" type="text" name="customerEmail1" placeholder="Email 1:"
                  data-parsley-trigger="change" required /&gt;   
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles1" value="onOrderCreate"&gt;On Order Create
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles1" value="onPuDel" &gt; On Pick/Del
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles1" value="invoicing"&gt; Invoicing
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles1" value="accountsPayable" &gt; Accounts Payable
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;br&gt;
              &lt;input class="form-control box-size" type="text" name="customerEmail2" placeholder="Email 2:"
                  data-parsley-trigger="change" required /&gt;   
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles2" value="onOrderCreate"&gt;On Order Create
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles2" value="onPuDel" &gt; On Pick/Del
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles2" value="invoicing"&gt; Invoicing
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles2" value="accountsPayable" &gt; Accounts Payable
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;br&gt;
              &lt;input class="form-control box-size" type="text" name="customerEmail3" placeholder="Email: 3"
                  data-parsley-trigger="change" required /&gt;   
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles3" value="onOrderCreate"&gt;On Order Create
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles3" value="onPuDel" &gt; On Pick/Del
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles3" value="invoicing"&gt; Invoicing
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles3" value="accountsPayable" &gt; Accounts Payable
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;br&gt;
              &lt;input class="form-control box-size" type="text" name="customerEmail4" placeholder="Email 4:"
                  data-parsley-trigger="change" required /&gt;   
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles4" value="onOrderCreate"&gt;On Order Create
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles4" value="onPuDel" &gt; On Pick/Del
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles4" value="invoicing"&gt; Invoicing
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" name="emailRoles4" value="accountsPayable" &gt; Accounts Payable
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 smPadding"&gt;
              &lt;br&gt;
              &lt;input type="checkbox" name="customerOriginalInvoices" value="true" &gt; Customer Require Original Invoices&lt;br&gt;
              &lt;input type="checkbox" name="customerAccountHold" value="true" &gt; Account on Hold&lt;br&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
      &lt;/form&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>The css that I was asked to place in</p>
  
  <pre><code>th, td {
    width: 50%;
    text-align: left;
  }
  </code></pre>
  
  <p>picture of the problem.</p>
  
  <p><a href="https://i.stack.imgur.com/lknHH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lknHH.jpg" alt="Check Boxes Not Lining up"></a></p>
  
  <p>Picutre of the full form showing that the textboxes line up proper with the table code.</p>
  
  <p><a href="https://i.stack.imgur.com/WNzek.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WNzek.jpg" alt="enter image description here"></a></p>
  
  <p>Picture after applying the above css.  Seems to make it worse.</p>
  
  <p><a href="https://i.stack.imgur.com/s7EnY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s7EnY.jpg" alt="enter image description here"></a>
  So if you can tell me what I am doing wrong here it would be greatly appreciated.</p>