Formatting of Data Table data is being affected by length of other data displayed
I would like to modify the HTML code below so that when the data is displayed, the
Table columns and data within keep the formatting on their own and are not affected by any data or formatting surrounding it. For example, if the Address field is long, the first Column in the Table labelled "Code" will also be spaced the same width as the data in the address field.
The code is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {background-color: powderblue;}
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
th {
text-align: left;
}
tr a {
display: block;
word-wrap: break-word;
}
tr th:nth-child(1) a {
width: 10ch;
}
tr th:nth-child(2) a {
width: 10ch;
}
tr th:nth-child(3) a {
width: 10ch;
}
tr th:nth-child(4) a {
width: 3ch;
}
tr th:nth-child(5) a {
width: 50ch;
}
tr th:nth-child(6) a {
width: 15ch;
}
tr th:nth-child(7) a {
width: 50ch;
}
tr th:nth-child(8) a {
width: 15ch;
}
</style>
<h1>Heading1</h1>
<h5>Generated on 06/29/2022 14:01:33 from File</h5>
<table>
<tr><td><span style="color: rgb(0,0,0); font-weight: bold; font-size: 20px; ">Company</span></td></tr>
<tr><td>Date1: 20220622</td></tr>
<tr><td>Date2: 20220802</td></tr>
<tr><td>Address1: Street Name, Township, State, Country, Zip,</td></tr>
<tr><td><span style="color: rgb(0,0,0);">Address2: Street Name, Township, State, Country, Zip, </td></tr>
<tr><td>Number: 00000000</td></tr>
<td>Code: 12345, </a></td><td>Code2: 0067890, Qty: 10.00, UOM: CA, Description: Description 1 here, Size: 1x1 oz, Price: $1.00, Currency: $USD</td></tr>
<td>Code: 67890, </a></td><td>Code2: 0012345, Qty: 12.00, UOM: CA, Description: Description 2 here, Size: 1x1 oz, Price: $1.00, Currency: $USD</td></tr>
<tr><td><span style="color: rgb(0,0,0); font-weight: bold;">TOTAL</span>: $1.00</td></tr>
<tr><td></td></tr>
<tr><td><span style="color: rgb(0,0,0); font-weight: bold; font-size: 20px; ">Company2</span></td></tr>
<tr><td>Date1: 20220622</td></tr>
<tr><td>Date2: 20220719</td></tr>
<tr><td>Address1: Street Name, Township, State, Country, Zip,</td></tr>
<tr><td>Address2: Street Name, Township, State, Country, Zip, </td></tr>
<tr><td>PO Number: 11111111</td></tr>
<td>Code: 85432, </a></td><td>Code2: 0013425, Qty: 11.00, UOM: CA, Description: Description 1 here, Size: 1x1 oz, Price: $1.00, Currency: $USD</td></tr>
<td>Code: 23456, </a></td><td>Code2: 0099876, Qty: 9.00, UOM: CA, Description: Description 2 here, Size: 1x1 oz, Price: $1.00, Currency: $USD</td></tr>
<tr><td><span style="color: rgb(0,0,0); font-weight: bold;">TOTAL VALUE</span>: $2.00</td></tr>
</table>
</body></html>
How can I modify the code so that the Table data starting with Code, Code 2.. etc.. will keep it's own formatting?
Thank you.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
What are you hoping for?
This is what your current code produces. It is normal and expected for each row to have the same number of columns and you don't.
This is what your current code produces. It is normal and expected for each row to have the same number of columns and you don't.
ASKER
Thank you. I am looking to change the code if possible, so that the Code 2 Column is next to the Code column, just like the Qty, UOM, CA, Description... are all side by side. I would like all those columns aligned so that all Columns start at exactly the same position.
This code will produce this table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {background-color: powderblue;}
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
th {
text-align: left;
}
tr a {
display: block;
word-wrap: break-word;
}
tr th:nth-child(1) a {
width: 10ch;
}
tr th:nth-child(2) a {
width: 10ch;
}
tr th:nth-child(3) a {
width: 10ch;
}
tr th:nth-child(4) a {
width: 3ch;
}
tr th:nth-child(5) a {
width: 50ch;
}
tr th:nth-child(6) a {
width: 15ch;
}
tr th:nth-child(7) a {
width: 50ch;
}
tr th:nth-child(8) a {
width: 15ch;
}
</style>
<h1>Heading1</h1>
<h5>Generated on 06/29/2022 14:01:33 from File</h5>
<table>
<tr><td><span style="color: rgb(0,0,0); font-weight: bold; font-size: 20px; ">Company</span></td></tr>
<tr><td>Date1: 20220622</td></tr>
<tr><td>Date2: 20220802</td></tr>
<tr><td>Address1: Street Name, Township, State, Country, Zip,</td></tr>
<tr><td><span style="color: rgb(0,0,0);">Address2: Street Name, Township, State, Country, Zip, </td></tr>
<tr><td>Number: 00000000</td></tr>
<td>Code: 12345, Code2: 0067890, Qty: 10.00, UOM: CA, Description: Description 1 here, Size: 1x1 oz, Price: $1.00, Currency: $USD</td></tr>
<td>Code: 67890, Code2: 0012345, Qty: 12.00, UOM: CA, Description: Description 2 here, Size: 1x1 oz, Price: $1.00, Currency: $USD</td></tr>
<tr><td><span style="color: rgb(0,0,0); font-weight: bold;">TOTAL</span>: $1.00</td></tr>
<tr><td></td></tr>
<tr><td><span style="color: rgb(0,0,0); font-weight: bold; font-size: 20px; ">Company2</span></td></tr>
<tr><td>Date1: 20220622</td></tr>
<tr><td>Date2: 20220719</td></tr>
<tr><td>Address1: Street Name, Township, State, Country, Zip,</td></tr>
<tr><td>Address2: Street Name, Township, State, Country, Zip, </td></tr>
<tr><td>PO Number: 11111111</td></tr>
<td>Code: 85432, Code2: 0013425, Qty: 11.00, UOM: CA, Description: Description 1 here, Size: 1x1 oz, Price: $1.00, Currency: $USD</td></tr>
<td>Code: 23456, Code2: 0099876, Qty: 9.00, UOM: CA, Description: Description 2 here, Size: 1x1 oz, Price: $1.00, Currency: $USD</td></tr>
<tr><td><span style="color: rgb(0,0,0); font-weight: bold;">TOTAL VALUE</span>: $2.00</td></tr>
</table>
</body></html>
ASKER
Thanks Dave. This is close to what I am looking for. Now only if the columns starting with code were spaced all so that they were left aligned and all evenly so that when they are displayed, all coljmns can be seen at the same location in bkth tables. Ideally if the company, date1, date2, and addresses would not be part of the table, that might be a good start.
Hi,
I would suggest you to use Datatables with responsive
https://datatables.net/
https://datatables.net/extensions/responsive/examples
Also there are tons of cool features so you can customize each colum or data based on settings and options
I would suggest you to use Datatables with responsive
https://datatables.net/
https://datatables.net/extensions/responsive/examples
Also there are tons of cool features so you can customize each colum or data based on settings and options
That doesn't make any sense. You need to create a table with full valid data to see how it's going to display. I'm certain that the Address fields are going to stretch the width of your table once you fill them in.
ASKER
I would like to change this code so that the Address fields and the data above it are not included in a Table and are independant of the formatting of the Table.
Hi,
A table is a table I mean the is syntax to build it.
A way to add some display method can be to adjust the CSS or use other method like toggle, popup etc to diplay extra info.
Default responsive https://datatables.net/extensions/responsive/examples/initialisation/default.html
Diplay row under https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html
Modal https://datatables.net/extensions/responsive/examples/display-types/modal.html
And you have many way to align the content
https://datatables.net/manual/styling/classes#Cell-classes
A table is a table I mean the is syntax to build it.
A way to add some display method can be to adjust the CSS or use other method like toggle, popup etc to diplay extra info.
Default responsive https://datatables.net/extensions/responsive/examples/initialisation/default.html
Diplay row under https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html
Modal https://datatables.net/extensions/responsive/examples/display-types/modal.html
And you have many way to align the content
https://datatables.net/manual/styling/classes#Cell-classes
ASKER
Thanks to all. I can see that with the data wanting to be displayed that there seems to be no way to display data above an html page that has more than 1 Table which will not affect the Table margins itself.
Hi,
You can always link two tables using Datatables
Table 1 display some content.
Table 2 is linked to table 1 to display other content. In your case this could be the item part or the order.
You can always link two tables using Datatables
Table 1 display some content.
Table 2 is linked to table 1 to display other content. In your case this could be the item part or the order.
So the first table display order shipping and contatc info and table 2 display the items ordered.
here an example (note it is using the editor but this can be achieve without the editor)
https://datatables.net/blog/2016-03-25
Other solution would be to use div not a table.
https://datatables.net/blog/2016-03-25
Other solution would be to use div not a table.
ASKER
I am looking for some assistance on how to change the configuration so that it produces the results I was hoping for.