0

I have a simple example of an html table yet it will not display correctly and I do not understand why.

code for the table:

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

The css that I was asked to place in

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

picture of the problem.

Check Boxes Not Lining up

Picutre of the full form showing that the textboxes line up proper with the table code.

enter image description here

Picture after applying the above css. Seems to make it worse.

enter image description here So if you can tell me what I am doing wrong here it would be greatly appreciated.

BobFranz
  • 250
  • 2
  • 15
  • It doesn't look like there's anything wrong with the HTML code (other than the unnecessary
    tags). How is the CSS?     – laurent Sep 16 '15 at 16:23
  • what is the expected result? – Kristijan Iliev Sep 16 '15 at 16:24
  • jsFiddle is fine - https://jsfiddle.net/zz968rnz/ – laurent Sep 16 '15 at 16:24
  • The code looks ok. Which browser did you use to display? Did you check other browsers? Any CSS or JS involved perhaps? – MBaas Sep 16 '15 at 16:30
  • there is no css I was just trying to get there to line up in 50% of the available space but doesn't look like the 's are behaving like that. I viewed in chrome. I removed the
    's and made no difference. I have used this similar table structure to display two textboxes inline and it worked great. But for these check boxes it isn't.     – BobFranz Sep 16 '15 at 16:33
  • If you remove the checkboxes, do the labels align properly? I also think this is some CSS rule interfering... – wwwmarty Sep 16 '15 at 16:47
  • I see that you have a text-box above. Could you provide the code for that and any parent table code? What you've provided currently runs correctly. – crazymatt Sep 16 '15 at 16:53
  • Just give a certain width to the TD s and set text-align:left; as the style for TD s . Then lets see what happens. – CntkCtn Sep 16 '15 at 17:05
  • 2
    @BobFranz Html tables are not meant for layout. They do not behave consistently between the different browsers. Please utilize divs and css to get the desired result. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – MiniRagnarok Sep 16 '15 at 17:15
  • @MiniRagnarok - Using the div's and css could you provide a mockup of the checkboxes instead of using tables? – BobFranz Sep 16 '15 at 17:34
  • @BobFranz https://www.google.com/search?q=using+divs+for+layout&oq=using+divs&aqs=chrome.3.69i57j0l5.6623j0j7&sourceid=chrome&es_sm=93&ie=UTF-8 – MiniRagnarok Sep 16 '15 at 18:10

1 Answers1

0

This is the proper way after some research on div layouts.

<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>
BobFranz
  • 250
  • 2
  • 15