CODEWITHSUNDEEP
htmlasp.netcssweb
karry
karry

Reputation: 3410

TD width more than designated

I have a table as below 

    <table style="border-spacing: 10px; width:auto; table-layout: fixed" id="tblCustomerinput">
       <tbody>
            <tr>
                <td width="2px">
                   <span class="error"> *</span>
                 </td>
                 <td style="width: auto;resize: horizontal;">
                    <span>Required Field</span>
                 </td>
                 <td>
                     <span id="cvEventsValidator" class="error" style="display:none;">Please complete the required fields below.</span>
                      <span id="reqFieldValidator" class="error" style="color:Red;display:none;">Please complete the required fields below.</span>
<br>

                </td>
             </tr>
             <tr>
                <td width="2px">

                </td>
                <td width="130px">
                  <b> <span id="lblCustNumber">Customer Number:</span></b>  
                 </td>
                 <td>
                    <input name="txtCustNumber" type="text" maxlength="50" id="txtCustNumber"> 
                 </td>
                </tr>
                <tr>
                   <td width="2px"><span class="error">*</span>
                   </td>
                   <td width="130px">
                      <b> <span id="lblFirstName">First Name:</span>  </b>
                   </td>
                   <td>
                       <input name="txtFirstName" type="text" maxlength="50" id="txtFirstName" class="requiredfield">
                   </td>
                 </tr>
                 <tr>
                    <td width="2px"><span class="error">*</span>
                    </td>
                    <td width="130px">
                                        <b> <span id="lblLastName">Last Name:</span></b>
                    </td>
                    <td>
                        <input name="txtLastName" type="text" maxlength="50" id="txtLastName" class="requiredfield">
                    </td>
                  </tr>
                  <tr>
                    <td width="2px">

                    </td>
                  <td width="130px">
                    <b> <span id="lblCompanyName">Company Name:</span></b>
                  </td>
                  <td>
                     <input name="txtCompanyName" type="text" maxlength="50" id="txtCompanyName">
                  </td>
                </tr>
                <tr>
                   <td width="2px" span="" class="error">*
                   </td>
                   <td width="130px">
                                       <b>  <span id="lblPhoneNumber">Phone Number:</span></b>
                    </td>
                    <td>
                       <input name="txtPhoneNumber" type="text" maxlength="50" id="txtPhoneNumber" class="requiredfield">
                    </td>
                   </tr>
                   <tr>
                      <td width="2px"><span class="error">*</span>
                      </td>
                      <td width="130px"><b>
                         <span id="lblEmail">E-mail Address:</span></b>
                      </td>
                      <td>
                           <input name="txtEmail" type="text" maxlength="50" id="txtEmail" class="requiredfield">
                      </td>
                     </tr>
                     <tr>
                      <td width="2px">

                      </td>
                      <td width="130px">
                          <b> <span id="lblDynamicField" maxlength="50"></span></b>
                      </td>
                      <td>
                          <input name="txtDynamicField" type="text" maxlength="50" id="txtDynamicField">
                      </td>
                    </tr>                                              
                    <tr>
                       <td colspan="2"><span id="Label1">Comments:</span> &nbsp;
                                     <br>

                          <textarea name="txtComment" rows="5" cols="20" id="txtComment" class="feedback_comment" onkeypress="return this.value.length &lt;=1500" onkeydown="limitText(this,1500);" onkeyup="limitText(this,1500);" style="width:360px;" clicks="0" onfocus="clearContents(this);">Please describe the problem you found...</textarea></td>
                     </tr>
                 </tbody>
         </table>

The width of the second always comes out as 347px for reasons I cant quite comprehend(!!??) I set a fixed width for the td as 130 px. Could anyone help me with this please? I had been scratching my head till it aches for this :) Basically I need to line up the Labels closer to the Textboxes.

As always thanks a ton for your help in advance.

Thanks

Upvotes: 0

Views: 141

Answers (1)

Ceres
Ceres

Reputation: 3648

The default width of the textarea which spans the first and second column is larger than the 130px. You need to set the width of the textarea to 130px or smaller. Or you can span the textarea's parent td colspan to 3 columns instead of 2.

Upvotes: 3

Related Questions