How can I position text next to an input within a <td> element in a vertical arrangement?

Below is the HTML code:

<fieldset><legend>Callout Report</legend>
<table>
<tr><td>Start Time</td><td>
<input type="text" id="startTimeUI" autocomplete="off" />
</td></tr>

<tr><td>Callout&nbsp;ID</td><td>
<input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
<span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
</td></tr>
</table>
</fieldset>

The current output looks like this:

https://i.stack.imgur.com/NDf7U.png

I am aiming for an output similar to this:

https://i.stack.imgur.com/ajrks.png

I have considered nesting a <table> element inside <td>, but I am exploring CSS solutions. Additionally, I'm having difficulty applying vertical-align:middle; to the input field.

Link to JSFiddle: https://jsfiddle.net/Wernfried/3ph32L7a/8/

The page is dynamically generated using jQuery, so utilizing $("#id").width() could be a viable option if needed.

htmlcsshtml-tablemultiple-columns

Answer №1

To enhance the layout, you have the option to modify the default display property of span to inline-block. This adjustment can make a significant difference by aligning the input and span elements separately as illustrated below:

body { 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#765452;
margin:0px; 
font-size:16px; 
}

fieldset { margin:0.4em 0.5em; }
fieldset legend { font-weight: bold; }
fieldset table { width:auto; border-collapse:collapse; }
fieldset table td { padding:0.4em 0.75em 0.4em 0.5em; border:1px solid ActiveBorder; }
fieldset table th { padding:0.2em 1em; border-style:solid; border-color:ActiveBorder; border-width:1px 1px 2px; } 
#id{
  margin-top:5px;
}
.calloutTitle {
  width:60%;
  display:inline-block;
  vertical-align:top;
  margin-left:10px;
}
<fieldset><legend>Callout Report</legend>
<table>
<tr><td>Start Time</td><td>
<input type="text" id="startTimeUI" autocomplete="off" />
</td></tr>

<tr><td>Callout&nbsp;ID</td><td>
<input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
<span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
</td></tr>
</table>
</fieldset>

Update -

The same effect is achieved by utilizing display inline-block for aligning the text within the span element separately, along with adjusting the default vertical-align property of the td tag.

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #765452;
  margin: 0px;
  font-size: 16px;
}

fieldset {
  margin: 0.4em 0.5em;
}

fieldset legend {
  font-weight: bold;
}

fieldset table {
  width: auto;
  border-collapse: collapse;
}

fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}

fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}

table tr:nth-of-type(2) td{
  vertical-align:middle;
}

table tr:nth-of-type(2) td > input{
  width:150px;
}
table tr:nth-of-type(2) td > span{
  width:calc(90% - 150px);
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>

    <tr>
      <td>Callout&nbsp;ID</td>
      <td>
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

Answer №2

Check out this design:

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #765452;
  margin: 0px;
  font-size: 16px;
}
fieldset {
  margin: 0.4em 0.5em;
}
fieldset legend {
  font-weight: bold;
}
fieldset table {
  width: auto;
  border-collapse: collapse;
}
fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}
fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}
.call-out {
  display: flex;
  align-items: center;
}
.calloutTitle {
  margin-left: 1%;
}
<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td class="callout">Callout&nbsp;ID</td>
      <td class="call-out">
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This text can span multiple lines and still fit perfectly.</span>
      </td>
    </tr>
  </table>
</fieldset>

Answer №3

Utilize the css property flex

body { 
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#765452;
  margin:0px; 
  font-size:16px; 
}
fieldset {
  margin: 0.4em 0.5em;
}
fieldset legend {
  font-weight: bold;
}
fieldset table {
  width: auto;
  border-collapse: collapse;
}
fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}
fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}
.calloutTitle {
  margin-left:10px;
}
.custom-class{
  display: flex;
  align-items: center;
}
<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td>Callout&nbsp;ID</td>
      <td class="custom-class">
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

Answer №4

To achieve the desired outcome without altering the current code, simply include the following CSS. Utilize the flex property to attain consistent results.

`fieldset table td {
    padding: 0.4em 0.75em 0.4em 0.5em;
    border: 1px solid ActiveBorder;
    display: flex;
}`

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 position my image in the center within a blank canvas?

What is the best way to center an image in a white space? I am working with HTML, PHP, and CSS, but I am unsure of how to achieve this. So far, I have tried aligning the image within text on w3schools.com, but my other attempts like: #image { margin- ...

phpcssimagehtml

Disabling the underline style on a4j:commandLink

Current Software Versions: Apache MyFaces 2.0 Rich Faces 4.3 Migration Challenge: We are in the process of upgrading from JSF version 1.2 to JSF version 2. One issue we have encountered is that there is no native support for sorting in rich:dataTable. ...

cssjsf-2richfaces

What is the best way to create a button that will trigger a modal window to display a message?

I am looking to create a button that will open a modal window displaying a message. However, when I tried to add a label and viewed the page, the desired window appeared on top of the rest of the content. But unfortunately, clicking the button did not prod ...

javascripthtmlcss

Utilizing CSS filters to add a blur effect to specific elements within an SVG

I've been attempting to use the CSS filter blur on certain elements, but for some reason it's not working as expected. Check out this example in a jsfiddle: http://jsfiddle.net/kuyraypj/ Even though I have applied the following CSS, my '.b ...

csssvg

A beginner's guide to implementing the GET method with Express.js

Hey there, I have a folder named "vehicles" on my PC and I'm looking to set up a localhost to generate links for each image in that folder. For example: localhost:800/vehicle/ So when I click on the link, it should display the image. However, bein ...

htmlnode.jsexpress

What steps do I need to take in order to load the static folder from a CSS file?

Is there a way to load the static folder from a CSS file? I attempted to import using URL(), however, it was unsuccessful. I am looking to utilize the static path in order to apply a background to an element. .input_card:checked+.check-box { backgroun ...

pythoncssdjango

The charset is failing to function properly when using the French language

Encountering an issue with the French language on a website I'm currently developing ... Specifically, there are menu bars, tabs, and text within each tab involved. Upon setting charset=ISO-8859-1, the body text functions correctly, but the menu bar ...

phphtmlencodingcharacter-encoding

What is the process for incorporating icons and choices into the header bar?

Seeking advice on how to incorporate an icon into the right side alignment of a simple blank header on my webpage, similar to the image provided. I have searched through numerous threads on StackOverflow without finding a suitable solution. Could someone s ...

jqueryhtmlcss

Using jQuery's .html function to insert images

I have a unique counter that counts in currencies, such as Yen and Euro. Each number, as well as the currency sign and separator, are all displayed on the webpage using custom-designed icons. I utilize the display: flex; property in my container div and ap ...

javascriptjquerycss

Looking for a particular table element using Selenium Webdriver in Java: A Guide

After locating a table element using this: WebElement tableElement = selectorboxelement.findElement(By.xpath("//ancestor::table")); I identified the `selectorboxelement` as a web element with this line of code: WebElement selectorboxelement = driver.fin ...

javaselenium-webdrivercellhtmlancestor

Arrange the child elements of a div to be displayed on top of one another in an HTML document

I am struggling with a div containing code .popupClass { width: 632px; height: 210px; position: absolute; bottom:0; margin-bottom: 60px; } <div class="popupClass"> <div style="margin-left: 90px; width: 184px; hei ...

javascriptjqueryhtmlcss

What could be causing this strange striping effect in the radial gradient?

What causes the striped effect in the radial gradient code provided on this website: click here to view body { background: rgba(216,215,221,1); background: -moz-radial-gradient(center, ellipse cover, rgba(enter code here216,215,221,1) 0%, rgba(0,9 ...

htmlcssgradient

Creating a visually appealing background image using WordPress and PHP

Currently struggling with adjusting the width of an image that's set as a background in Wordpress. The text is perfectly centered, but the background image remains full size and I want it to match the container size... You can view the image at the t ...

phphtmlcsswordpressimage

Center sidenav material 2 in alignment

Using Angular Material 2 presents a challenge for me: While I can align the text in the sidenav to center, I am struggling to align the button correctly. https://i.sstatic.net/vjHw4.png <md-sidenav-layout fullscreen> <md-sidenav #start mode=" ...

htmlcssangularangular-materialangular-material2

Display an image in HTML, followed by a brief pause, and then showcase a second image

I am attempting to create a functionality where when a user checks off a radio box, an image displays first, followed by an swf file after 10 seconds. I have successfully implemented the image display. However, my attempt at using PHP sleep function within ...

phpjqueryhtmlwait

Is it necessary to use the strict doctype if our code is already valid with the transitional doctype?

Are there any drawbacks to using a transitional doctype with presentational or deprecated elements, even if our code is valid in W3C validation with a transitional doctype? Will we need to rewrite or edit the code of websites using XHTML/HTML transitional ...

htmlcssxhtmlw3cw3c-validation

Fixing the vertical centering of content when printing HTML

My bootstrap 4-based HTML page is looking good on most screens, but when I try to print it, the content is vertically centered in the print layout. How can I ensure that the content is displayed at the top of the paper? Below is the HTML code snippet for ...

htmlcssbootstrap-4printing

What is the best way to switch between different styles for each paragraph using CSS?

I attempted to use the :nth-of-type selector, but I am uncertain if it is feasible or if it accomplishes what I desire. My goal is to create an alternating style: two paragraphs aligned on the left, followed by two on the right, and so forth, regardless of ...

htmlcss

What could be causing the lack of animation in W3schools icons?

I've followed the steps provided and even attempted to copy and paste them. However, I'm experiencing an issue where the animation doesn't fully execute. Instead of the bars turning into an X shape, they reset halfway through the animation. ...

javascripthtmlcss

A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Sorry for the vague title, I'm struggling to explain my issue clearly, so let me elaborate. I am using flexbox to create a 3-column layout and want the middle column to expand when either or both of the side panels are collapsed. Here is a screenshot ...

javascriptcssflexboxcss-transforms