Automatic width table design

I am trying to position the "User ID" label closer to its value by aligning it to the right side, as shown in the picture below. I have attempted using additional colspan's but haven't been successful. The User ID can contain anywhere from 1 to 9 digits.

      <center>
      <table id="customer_info">
        <tr>
          <td><img id="logo" src="img/logo.png" align="middle"></img></td>
          <td colspan="2">User ID</td>
          <td>011238</td>
        </tr>
         <tr>
          <td colspan="3">Items to get:</td>
          <td>390 s.</td>
        </tr>
        <tr>
          <td colspan="3">Complete until:</td>
          <td>21.1.2013</td>
        </tr>
      </table>
      </center>
      <hr />

table {
  white-space: nowrap;
  border: none;
  width: 250px;
  height: 50px;
  border-spacing: 0px;
  color: #806E66;
  font-family: "Arial";
  font-size: 14px;
  text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

#customer_info tr > td:last-child {
  text-align: right;
  font-weight: bold;
  font-size: 16px;
  color: #E36608;
}

#customer_info tr:nth-child(1) > td:nth-child(2) {
  text-align: right;
  font-size: 12px;
}

Answer №1

because all the table cells are interconnected and rely on each other's width

To address this issue, you can try the following solution:

<center>
      <table id="customer_info">
        <tr>
          <td colspan="3" align="right">
          <table width="100%"><tr><td><img id="logo" src="img/logo.png" align="middle"></img></td><td align="right">User ID</td><td align="right">011238</td></tr></table></td>
        </tr>
         <tr>
          <td colspan="2">Items to obtain:</td>
          <td width="100%" align="right">390 s.</td>
        </tr>
        <tr>
          <td colspan="2">Due by:</td>
          <td align="right">21.1.2013</td>
        </tr>
      </table>
</center>
      <hr />

I hope this solution is helpful.

Answer №2

View Demo Here HTML

<center>
  <table id="customer_info">
    <tr>
      <td width="30%">
        <img id="logo" src="img/logo.png" align="middle" />
      </td>
      <td width="15%">&nbsp;</td>
      <td style="text-align:right" width="30%">
        User ID
      </td>
      <td width="30%">
        011238
      </td>
    </tr>
    <tr>
      <td colspan="3">
        Items to be received:
      </td>
      <td>
        390 s.
      </td>
    </tr>
    <tr>
      <td colspan="3">
        Deadline for completion:
      </td>
      <td>
        21.1.2013
      </td>
    </tr>
  </table>
</center>
<hr />

CSS

table {
  white-space: nowrap;
  border: none;
  width: 250px;
  height: 50px;
  border-spacing: 0px;
  color: #806E66;
  font-family: "Arial";
  font-size: 14px;
  text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

#customer_info tr > td:last-child {
  text-align: right;
  font-weight: bold;
  font-size: 16px;
  color: #E36608;
}

#customer_info tr:nth-child(1) > td:nth-child(2) {
  text-align: right;
  font-size: 12px;
}

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

Exception encountered with HTML5 cache manifest

I attempted to implement the application cache feature on my website, but I am facing a major issue. I only want to cache three specific files: style.css, favicon.ico, and script.js. The problem arises when the browser also caches other files such as inde ...

When using v-select to search for items, the selected items mysteriously vanish from

I recently worked on a project where I encountered a similar situation to the one showcased in this CodePen. Here is the link to the specific CodePen One issue I faced was that the selected items would disappear when performing an invalid search. After i ...

The function designed to create in-line TailwindCSS classNames may work inconsistently in React and NextJS environments

Currently, I am utilizing TailwindCSS to style a web application. One frustrating aspect is that when attempting to add before: and after: pseudo-elements, it must be done individually. For instance, take the navigation drop-down button styling: <span ...

Is there a different option available in place of the JavaScript confirm function?

I developed an application where I heavily utilized the javascript confirm function. confirm("Do you want to proceed"); However, I am not satisfied with the default appearance of the confirm dialog and would like to implement a customized version with be ...

What is the best way to center this menu on the web page?

Is there a way to center this menu on the web page for better alignment? Any suggestions on improving the code are welcome. Thank you in advance. Edit: Also, how can I modify the hover effect to change the background color to green and make it expand full ...

I'm having trouble with fixing the TypeError that says "Cannot read properties of undefined (reading 'style')." How should I address this issue

I'm having trouble with a slideshow carousel on my website. When the site loads, only the first image is shown and you have to either click the corresponding circle or cycle through all the images using the arrows for the image to display. I'm al ...

Guide on displaying the <html> tag within text using AngularJS

I need to display some data in HTML, which looks like this: <p>abcd efg hijk....(<a href=\"http:\/\/www.facebook.com\/stock\/NBR\">NYSE:NBR<\/a>),, however, there are some HTML tags within ...

How can I use appendChild to place two different elements into a single div?

While exploring similar questions on this topic, I have unfortunately not come across a solution that works for me. My challenge is trying to insert two a elements inside of a newly created div element using appendChild. However, I am unable to append them ...

How to align scrolling images with their scroll origin - a step by step guide

Curious to know the name of the effect where images scroll in a different orientation than the page, creating a 2D appearance. Take a look at the Google Nexus website and scroll down - do you see the effect? What is this effect called? Is it created usin ...

Ways to modify the gap between buttons using CSS

I am faced with a design challenge on my home page. I want to add some spacing between the buttons so they are not too close to each other, but for some reason margin-top and margin-bottom properties are not working as expected. Can you help me figure out ...

Embed an audio file onto a webpage

Is there a way to add an audio file to my website if I only have the .mp3 version and not the .ogg one? When I try to play the audio, it doesn't work. Can someone help me with this issue? Here is the code I am currently using: <audio controls auto ...

Adjust the size of a canvas using JavaFX in an FXML file

I am encountering an issue with resizing a canvas in Javafx while using scene builder and fxml. Currently, when the user clicks on the canvas, it turns black, but upon resizing the screen and clicking on the canvas again, only the original size of the canv ...

HTML5 database error: Uncaught TypeError due to illegal invocation

When I test the code below in Chrome, I encounter an error: var db = openDatabase('foo', 1, 'foo', 1111); var sql = function(callback){ db.transaction(function(tx){ callback(tx.executeSql); }); }; sql(function(query){ ...

Is it possible to retrieve JSON data from an external URL using JavaScript or jQuery?

My goal is to retrieve JSON data from the following URL: I have a button that triggers the function called "jsonplz()", which should display an alert message with the fetched JSON data. This is what my JavaScript code looks like: <script src="htt ...

Unique background image for every individual page

For my mobile app development using Jquery Mobile, I have implemented a custom theme but now want to vary the background images for different sections. My current code looks like this: .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { ...

Identifying the moment when the body scroll reaches the top or bottom of an element

I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...

PHP functionality to generate a table with provided data, followed by enabling the user to access the information by

I have a web page created with HTML that utilizes PHP to retrieve information from a database and populate it into a table. How can I set it up so that when a user clicks a button, a specific action is performed based on the data in the table using PHP? I ...

Ways to access the innerHTML of a specific HTML element by targeting its class using jQuery

I'm working with HTML code that looks like this: <div class="a">html value 1</div> <div class="a">html value 2</div> Is there a way to retrieve html value 1 and html value 2 using jQuery? ...

Can you explain the process of selecting a SubMenu Item that is a hover link in IE using C# and Selenium?

I have been scouring various topics on Stack Overflow and other platforms for days in search of a solution to my problem, but so far, I have had no luck. I am facing an issue with automating a website using C# Selenium where Webdriver is unable to click on ...

What is preventing me from retrieving an ID value within an IF condition?

I'm trying to create a script that only allows devices with matching IP addresses, but I'm having trouble using an if statement. Whenever I include x.id inside the statement, it doesn't seem to work... any suggestions? <html> <sc ...