Guide to designing a single-row table with varying numbers of columns and ensuring alignment is in place

I currently have a table displayed https://i.sstatic.net/20gZm.png

The issue arises when I input large amounts of data, causing the structure to become irregular as depicted above. My query revolves around maintaining proper alignment within the table even when extensive data is entered.

Below is the code being utilized:

#Invoicebanner {
  width: 610px;
  height: 15px;
  margin: 20px auto;
  border: 0px solid #000;
  text-align: center;
}
<div id="Invoicebanner">
  <div style="border-left: 1px solid black;border-right: 1px solid black;border-top: 1px solid black;width:608px">
    <center><span style="font-size: 18px;"><b>Purchase Order</b></span>
    </center>
  </div>
  <table align="center" style="border: 1px solid " cellpadding="0" cellspacing="0" width="100%">
    <tr align="left">
      <td rowspan="5" style="border-right: 1px solid black;width: 300px;word-break: break-all;">
        <b>&nbspTo,</b>
        <br/>
        &nbsp
        <%=request.getParameter( "supplierAddress")%>
      </td>
      <td style="border-right: 1px solid black;border-bottom: 1px solid black;word-break: break-all;">
        &nbspP.O.NO
        <br/>
      </td>

      <td style="border-bottom:1px solid black;word-break: break-all;">
        &nbsp
        <%=request.getParameter( "poNo")%>
      </td>
    </tr>

    <tr align="left">
      <td style="border-bottom:1px solid black;border-right: 1px solid black;word-break: break-all;">
        &nbspDate
      </td>
      <td style="border-bottom:1px solid black;word-break: break-all">
        &nbsp
        <%=D ate%>
      </td>
    </tr>
    <tr align="left">
      <td style="border-right: 1px solid black;word-break: break-all;">
        &nbspContact Name:
        <br/>
      </td>
      <td style="word-break: break-all;">
        &nbsp
        <%=request.getParameter( "contactName")%>
          <br/>
      </td>
    </tr>
    <tr align="left">
      <td style="border-right: 1px solid black;width: 110px;word-break: break-all;">
        &nbspContact No:
        <br/>
      </td>
      <td style="word-break: break-all;">
        &nbsp
        <%=request.getParameter( "contactNo")%>
          <br/>
      </td>
    </tr>
    <tr align="left">
      <td style="border-right: 1px solid black;width: 110px;word-break: break-all;">
        &nbspEmail-Id:
      </td>
      <td>
        <td style="word-break: break-all;">
          &nbsp
          <%=request.getParameter( "email")%>
        </td>
    </tr>
  </table>

javascriptjqueryhtmlcssjsp

Answer №1

Your code has an extra <td> tag at the end of the last <tr>. Removing it will resolve the issue. You can refer to this fiddle for clarification: https://jsfiddle.net/8dfxg7az/

SOLUTION

<tr align="left">
      <td style="border-right: 1px solid black;width: 110px;word-break: break-all;">
        &nbspEmail-Id:
      </td>
      <td> <-- REMOVE THIS
        <td style="word-break: break-all;">
          &nbsp
          <%=request.getParameter( "email")%>
        </td>
    </tr>
  </table>

Answer №2

Give this a shot:

.box {
  width: 500px;
  height: 400px;
  margin: 0 auto;
}
.header {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border: 1px solid black;
}
.grid {
  width: 500px;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: #000;
  table-layout: fixed;
}
td {
  height: 40px;
  vertical-align: middle;
}
.cell-1 {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
<div class="box">
  <div class="header">Product Details</div>
  <table class="grid">
    <tr>
      <td>Name: 
        <%=request.getParameter( "productName")%>
      </td>
      <td class="cell-1">
        <table>
          <tr>
            <td>Price
            </td>
          </tr>
          <tr>
            <td>Category:</td>
          </tr>
          <tr>
            <td>Stock Available:</td>
          </tr>
          <tr>
            <td>Supplier:</td>
          </tr>
          <tr>
            <td>Contact Info:</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr>
            <td>
              additional information goes here.</td>
          </tr>
          <tr>
            <td>
              more details can be added here.</td>
          </tr>
          <tr>
            <td>
              further descriptions here.</td>
          </tr>
          <tr>
            <td>
              and some more details here.</td>
          </tr>
          <tr>
            <td>
              final notes go here.</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

Check out the Codepen link for a working example.

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

Is there a way to retrieve the data attribute value from a button that has been clicked?

Is there a way to retrieve the data attribute value of a clicked button? I need this information for handling an ajax form submission. Any suggestions on how to achieve that? Here is an example of my button (there are multiple buttons corresponding to dif ...

javascriptjquerydataset

Display the LOADING indicator until the entire page has finished loading

Here is the JavaScript code that I am currently using: function generateRequest(){ var request; if(window.XMLHttpRequest){ // Works with Firefox, Safari, Opera request = new XMLHttpRequest(); } else if(window.ActiveXObject) ...

javascriptajax

Sending image URLs as props in React-Modal might cause an error if not handled properly - TypeError: Cannot read properties of undefined (reading 'map') - so make sure to

Every time I attempt to execute this code, an error pops up: TypeError: Cannot read properties of undefined (reading 'map') This code is supposed to display the image modal, but instead, it's throwing an error. I'm puzzled as to why ...

javascriptreactjsmappingbootstrap-modal

Tips on including the Elastic Search JavaScript client library in Node.js controller files

Currently, I'm working on a node.js project using the express framework and creating a RESTful API. My next step is to integrate elastic search into my application. I've started by installing the elastic search JavaScript client library and addin ...

javascriptnode.jsexpresselasticsearch

The iconbar feature in the mobile menu is experiencing functionality issues

I am currently experimenting with the iconbar property of mmenu (here: ) Unfortunately, I am encountering an issue. The menu opens as expected when I run the code. However, upon closing the menu, it first closes completely and then the container slides sl ...

javascriptjqueryhtmlcssmmenu

Capture an image of the video frame every second

Have you ever noticed the cool feature on YouTube where you can easily 'scrub' through video and see a thumbnail view at each second? https://i.sstatic.net/Yi8He.png I'm curious - how is this achieved? Does the server have to send over eac ...

javascripthtmlvideohtml5-video

Overlapping columns with bootstrap images

Struggling to make three images responsive using Bootstrap columns. While they appear responsive, the issue is that the images overlap, except for the last column which displays correctly. <div class="row"> <div class="col-sm-2 offset-sm-3" ...

htmlbootstrap-4responsive

What is the best way to make a background image that adjusts in size while maintaining the aspect ratio?

Looking to set up a unique loading screen for my GMOD server. When players are using a 4:3 monitor, the background image needs to be resized or cropped accordingly. Any suggestions on how I can achieve this? ...

htmlcss

The CSS background image in PNG format displays a white line at the beginning of the transparency

How can I remove the white border that appears on PNG images with transparency when used as a background with CSS on retina devices? .background { background: url('../image.png') no-repeat; } ...

cssphotoshopretina-display

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

htmlangulartypescript

When assessing a list against an array of objects in JavaScript

I am currently working on some Angular code with the objective of minimizing the use of Angular 1.x functionality, as it will be refactored in the near future. My task involves comparing an array: let subscription = [ "Cinemax Subscription", "Disn ...

javascriptangularjsarraysloops

Is it possible to retrieve a (escaped) HTML attribute from an XML node using XPath?

In this scenario, the XML node labeled 'description' includes HTML that has been escaped. My goal is to extract the src attribute from the first img tag. Is there a method in XPath to accomplish this task? <item> <description>&am ...

phphtmlxmlxpath

Center align the text inside a table cell of a span that is floated to the right and has a varying

Struggling to align a span vertically in the middle with a different font size than its table cell. The goal is to have the following layout: | | | Measurement (font-size: 100%) unit (font- ...

htmlcsscss-float

Select every p element that comes after an h2 tag using CSS

Is there a way to select all paragraph elements that come after a specific heading? <h2 class = 'history'>History</h2> <p>this is paragraph 1</p> <p>this is paragraph 2</p> <p>this is paragraph 3</p&g ...

htmlcsscss-selectors

Unlocking the full potential of Bootstrap with the colspan feature

I'm currently in the process of developing an Angular 2 and Bootstrap application. Here's a snippet of my code: <div class="panel-body"> <table class="table table-striped table-bordered" style="width:100%;"> < ...

csstwitter-bootstrapangular

Is there a way to set up HTML5 Video.js in Boonex Dolphin?

My current project involves utilizing the Video.js Source Code to update the video player on my website that currently uses Boonex Dolphin. I am looking to transition from the flash player used by Dolphin to HTML5. Dolphin's modules contain specific f ...

javascriptphphtmlvideoboonex-dolphin

JavaScript: transform all repetitive elements in the array

One interesting example in my code. var array=[[1,'a'],[1,'b'],[2,'c'],[2,'b'],[2,'d'],[3,'a'],[3,'s'],[3,'w'],[3,'q'],[4,'w']] Desired output is as below ...

javascriptarraysreplacecompare

Ways to grow a React Component using flexbox to fill the entire page

Currently, I am facing a challenge in creating a sidebar. The issue lies in the container for the element "shrinking to its content." I have explored different solutions such as flex-grow, setting App.css html,body height to 100%, and more, but none of th ...

htmlreactjsflexboxcontainers

Having difficulty extracting the values of td elements from a table in HTML string using PHP's XPath parser

From a Wikipedia page, I have the html snippet below... <table class="wikitable"> <tbody> <tr> <td>mod_access</td> <td>Versions older than 2.1</td> <td>Included by Default</td> </tr ...

phphtmlxpath

What is the best way to import data (such as a CSV file) into a webpage using a script tag?

How can a resource be loaded in HTML5 using a script tag? The given syntax doesn't seem to be working as expected. <script src="file.structure" type="application/structure"></script> Appreciate any help on this issue! ...

htmlresourcesloading