Exceeding the specified width in the TD element

I have a table displayed 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 encountered...</textarea></td>
                     </tr>
                 </tbody>
         </table>

The second column's width always appears as 347px for reasons that I can't seem to figure out(!!??) I set a fixed width of 130 px for the td. Would someone be able to assist me with this matter please? I've been puzzling over it until my head starts hurting :) Essentially, I need to align the Labels closer to the Textboxes.

Thank you in advance for your assistance.

Appreciate it!

htmlasp.netcssweb

Answer №1

The default width of the textarea that extends across the first and second columns exceeds 130px. To resolve this, adjust the textarea's width to 130px or less. Alternatively, you can expand the parent td element of the textarea to span 3 columns instead of 2.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that my dynamically generated div shows up within the container div?

Web Development <div id="container"> <div id="wrapper"> </div> <span id = "waveNum">Current Wave: 0</span> <input type = "button" value = "Start Game" onclick = "startGame()"></input> </div> ...

javascriptjqueryhtmlcss

Is Object Cloning the Solution for Creating Multiple Views in THREE.js with Multiple Canvasses? Considerations to Keep in Mind

While seeking advice on object picking from small three.js viewport, I learned a technique for mouse-picking objects from a smaller canvas. Now, I am looking to showcase N different views of the same scene while still being able to perform object picking. ...

javascripthtmlcanvasthree.js

Place the "Close" button outside of the div container

I am facing an issue with the login button protruding slightly outside the border of a div. Despite trying to adjust the code to align it correctly, the issue persists. .closeWindow{ float: right; margin-left: 15px; /* half the width of the close b ...

htmlcss

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

javascripthtmlcssvue.jsvuex

Automated logout feature will be enabled if no user interaction is detected, prompting a notification dialog box

Here is my working script that I found on this site. After a period of idle time, an alert message will pop up and direct the user to a specific page. However, instead of just the alert message, I would like to implement a dialog box where the user can ch ...

javascriptphpjqueryhtml

Using anchor tags to send HTML code through email

I currently have an anchor tag on my website that looks like this: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0d11131b11101b3e0d11131b09161b0c1b501d1113">[email protected]</a>?subject=Wel ...

javascripthtmlhtml-emailmailto

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

I attempted the example provided below, but unfortunately, it did not function as expected. The reason behind my endeavor is that adding numerous modifiers (--tuned) to achieve the desired outcome seemed impractical. Therefore, I decided to try and link ...

javascriptcsstypescriptvue.js

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

javascripthtmldom

Facing problems with the directory!

I'm experiencing some trouble with directory paths. Let's say I have a file located in the following directory: public_html/v3/index.php And from there, I want to access this file: public_html/navigation/sideLogIn.php I've tried using t ...

phphtml

It is not possible to alter the ASP login in the page_load or page_init events

I am facing an issue with my login page where I have an asp:Login field. My goal is to set custom paths for the create account URL and the forgot password URL. I tried implementing this logic in both Page_Load and Page_Init methods, but unfortunately, ne ...

asp.netauthenticationpage-lifecycle

I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

<script> function save_user() { const uid = document.getElementById('user_id'); const userpwd = document.getElementById('user_pwd'); const btnregister=document.getElementById('btn-acti ...

htmlcssfirebase

What about an external ui-grid-menu-button option for customizing the

Looking for a solution to separate the ui-grid-menu-button from the top right of the table and position it elsewhere? Check out this Stack Overflow question from a year ago which unfortunately remains unanswered: External ui-grid-menu-button Struggling t ...

javascriptcssangularjsangular-ui-grid

add styling to elements contained within a specified list of URLs

I'm not confident in my CSS/HTML/jQuery skills but I believe what I want to achieve may require JavaScript/jQuery. I want to apply a specific style to an element only when a certain URL is accessed on my website. Since I am using ASP.NET and one temp ...

javascriptjqueryhtmlcssasp.net

Tips for positioning a div between two vertically aligned input elements

I'm trying to figure out how to place a div between two inputs with the same height and vertically aligned. It seems like a simple task, but for some reason, the code below isn't working: input{ width: 35%; border: 1px solid #A7A7A7; ...

htmlcss

Developing Unique Custom Controls in .NET MVC 4

I'm embarking on a fresh .NET venture with MVC 4 This project will involve numerous instances of repetitive content, prompting me to question whether Custom Controls are the way to go or if they have fallen out of favor. If not, what is the recommen ...

asp.netasp.net-mvc-4

Having trouble with the move_uploaded_file function in PHP?

I have been actively studying PHP and am currently working on a CMS project. I have encountered an issue with image uploading. PHP if ( $_POST['img']) $uploads_dir = '/images'; $tmp_name = $_FILES["img"]["tmp_name"]; $name = $_FIL ...

phphtmlmysqlfile-upload

iOS iframe remains unscrollable only when switching from portrait to landscape orientation

I have a scrollable iframe set up on iOS like this: <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ..."> <iframe style="height: 600px, ..."> </iframe> </d ...

javascriptioscssiphoneiframe

What is causing the inability of this simple Google Maps link to function properly on a Nexus 7?

Visit this link for Google Maps A client has reported that the link above is causing an error when opening the maps app. The error message reads: "unsupported link. Google Maps can't open this link." This problem is occurring on a Nexus 7 and Samsu ...

androidhtmlgoogle-mapsmaps

The data being transmitted by the server is not being received accurately

Hey there! I've recently started using express.js and nodejs, but I've encountered an issue where my server is sending me markup without the CSS and JS files included. const express = require('express'); const app = express(); const htt ...

javascripthtmlnode.jsexpress

Activate simultaneous HTML5 videos on iOS devices with a simple click

I am currently in the process of developing a webpage that will play various videos when specific elements are clicked. Although the functionality works perfectly on desktop computers, it encounters an issue on iOS devices. The problem arises when the elem ...

javascriptjqueryhtmlvideoios5