为什么我的HTML表格不能正确显示
我有一个简单的html表格示例，但它不能正确显示，我不明白为什么 表的代码：为什么我的HTML表格不能正确显示,html,html-table,Html,Html Table,我有一个简单的html表格示例，但它不能正确显示，我不明白为什么 表的代码： <div class="container"> <form id="testform" data-parsley-validate> <div class="row"> <input class="form-control typeahead" name="customerSearch" type="text" pl
<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>
因此，如果您能告诉我我在这里做错了什么，我们将不胜感激。在对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>
按订单创建
提货/提货
开票
应付账款
标记）。CSS如何？预期的结果是什么？JSFIDLE很好-代码看起来不错。您使用哪个浏览器显示？你检查过其他浏览器吗？可能涉及到CSS或JS吗？@BobFranz Html表格不适用于布局。它们在不同浏览器之间的行为并不一致。请使用div和css来获得所需的结果。
<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>