Почему моя таблица HTML не отображается правильно

Question

У меня есть простой пример таблицы html, но она не будет отображаться правильно, и я не понимаю, почему.

код для таблицы:

<div class="container"> 
    <form id="testform" data-parsley-validate> 
    <div class="row"> 
     <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"/>  

     <button type="button" class="btn btn-warning">Clear</button> 
     <button type="button" class="btn btn-success">Create</button> 

    </div> 
    <div class="row"> 
     <div class="col-md-4 smPadding"> 
      <br> 
      <!-- Customr Contact info and factoring company info --> 
      <input class="form-control box-size" type="text" name="customerName" placeholder="Customer:" 
       data-parsley-trigger="change" minlength="6" required /> 
      <input class="form-control box-size" type="text" name="customerAddress" placeholder="Address:" 
       data-parsley-trigger="change" minlength="6" required /> 

      <table> 
       <tr> 
        <td> 
         <input class="form-control box-size" type="text" name="customerSuite" placeholder="Suite:" /> 
        </td> 
        <td> 
         <input class="form-control box-size" type="text" name="customerCity" placeholder="City:" 
          data-parsley-trigger="change" minlength="3" required />   
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input class="form-control box-size" type="text" name="customerState" placeholder="State/Prov:" 
          data-parsley-trigger="change" minlength="2" maxlength="2" required /> 
        </td> 
        <td> 
         <input class="form-control box-size" type="text" name="customerZip" placeholder="Zip/Postal:" 
          data-parsley-trigger="change" minlength="5" required />     
        </td> 
       </tr> 
      </table> 

      <input class="form-control box-size" type="text" name="customerPhone1" placeholder="Phone 1:" 
       data-parsley-trigger="change" minlength="10" required /> 

      <input class="form-control box-size" type="text" name="customerPhone2" placeholder="Phone 2:" 
       data-parsley-trigger="change" minlength="10"/> 

      <input class="form-control box-size" type="text" name="customerFax" placeholder="Fax:" 
       data-parsley-trigger="change" minlength="10"/>  

      <input type="checkbox" name="customerFactorInvoices" {{isFactoredCheckAnswer}}> Does Company Use Invoice Factoring?<br> 

      {{#if isFactoredCheck}} 
       <input class="form-control box-size" type="text" name="factoringName" placeholder="Customer:" 
        data-parsley-trigger="change" minlength="6" {{factorRequired}}/> 

       <input class="form-control box-size" type="text" name="factoringAddress" placeholder="Address:" 
        data-parsley-trigger="change" minlength="6" {{factorRequired}}/> 

       <table> 
        <tr> 
         <td> 
          <input class="form-control box-size" type="text" name="factoringSuite" placeholder="Suite:" 
           data-parsley-trigger="change" /> 
         </td> 
         <td> 
          <input class="form-control box-size" type="text" name="factoringCity" placeholder="City:" 
           data-parsley-trigger="change" minlength="3" {{factorRequired}} />  
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input class="form-control box-size" type="text" name="factoringState" placeholder="State/Prov:" 
           data-parsley-trigger="change" minlength="2" maxlength="2" {{factorRequired}} /> 
         </td> 
         <td> 
          <input class="form-control box-size" type="text" name="factoringZip" placeholder="Zip/Postal:" 
           data-parsley-trigger="change" minlength="5" {{factorRequired}} />     
         </td> 
        </tr> 
       </table> 

       <input class="form-control box-size" type="text" name="factoringPhone1" placeholder="Phone 1:" 
        data-parsley-trigger="change" minlength="10" /> 

       <input class="form-control box-size" type="text" name="factoringPhone2" placeholder="Phone 2:" 
        data-parsley-trigger="change" minlength="10"/> 

       <input class="form-control box-size" type="text" name="factoringFax" placeholder="Fax:" 
        data-parsley-trigger="change" minlength="10"/>   

       <input class="form-control box-size" type="text" name="factoringEmail" placeholder="Email:" 
        data-parsley-trigger="change" /> 
      {{/if}} 
     </div> 

     <div class="col-md-4 smPadding"> 
      <br> 
      <input class="form-control box-size" type="text" name="customerEmail1" placeholder="Email 1:" 
       data-parsley-trigger="change" required /> 
      <table> 
       <tr> 
        <td> 
         <input type="checkbox" name="emailRoles1" value="onOrderCreate">On Order Create 
        </td> 
        <td> 
         <input type="checkbox" name="emailRoles1" value="onPuDel" > On Pick/Del 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" name="emailRoles1" value="invoicing"> Invoicing 
        </td> 
        <td> 
         <input type="checkbox" name="emailRoles1" value="accountsPayable" > Accounts Payable 
        </td> 
       </tr> 
      </table> 
      <br> 
      <input class="form-control box-size" type="text" name="customerEmail2" placeholder="Email 2:" 
       data-parsley-trigger="change" required /> 
      <table> 
       <tr> 
        <td> 
         <input type="checkbox" name="emailRoles2" value="onOrderCreate">On Order Create 
        </td> 
        <td> 
         <input type="checkbox" name="emailRoles2" value="onPuDel" > On Pick/Del 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" name="emailRoles2" value="invoicing"> Invoicing 
        </td> 
        <td> 
         <input type="checkbox" name="emailRoles2" value="accountsPayable" > Accounts Payable 
        </td> 
       </tr> 
      </table> 
      <br> 
      <input class="form-control box-size" type="text" name="customerEmail3" placeholder="Email: 3" 
       data-parsley-trigger="change" required /> 
      <table> 
       <tr> 
        <td> 
         <input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create 
        </td> 
        <td> 
         <input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing 
        </td> 
        <td> 
         <input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable 
        </td> 
       </tr> 
      </table> 
      <br> 
      <input class="form-control box-size" type="text" name="customerEmail4" placeholder="Email 4:" 
       data-parsley-trigger="change" required /> 
      <table> 
       <tr> 
        <td> 
         <input type="checkbox" name="emailRoles4" value="onOrderCreate">On Order Create 
        </td> 
        <td> 
         <input type="checkbox" name="emailRoles4" value="onPuDel" > On Pick/Del 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" name="emailRoles4" value="invoicing"> Invoicing 
        </td> 
        <td> 
         <input type="checkbox" name="emailRoles4" value="accountsPayable" > Accounts Payable 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div class="col-md-4 smPadding"> 
      <br> 
      <input type="checkbox" name="customerOriginalInvoices" value="true" > Customer Require Original Invoices<br> 
      <input type="checkbox" name="customerAccountHold" value="true" > Account on Hold<br> 
     </div> 
    </div> 
    </form> 
</div> 

CSS-код, который мне было предложено место в

th, td { 
    width: 50%; 
    text-align: left; 
} 

картину проблемы.

Picutre в полной форме, показывая, что Textboxes линию собственно с кодом таблицы.

Изображение после применения выше CSS. Кажется, это еще хуже.

Так что если вы можете сказать мне, что я делаю неправильно, здесь было бы очень полезно.

Answer 1

Это правильный способ после некоторого исследования макетов div.

<div class="row"> 
       <div class="col-md-6"> 
        <input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create<br> 
        <input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del 
       </div> 
       <div class="col-md-6"> 
        <input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing<br> 
        <input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable 
       </div> 
      </div>