In a HTML-Table I have several columns, sortable by JavaScript. One column gets filled by numbers like 23, 61, 23 etc. and I would like to add some text after the numbers, which shall be used for sorting.
The numbers shall be visible <Font-Size=8> but the text behind shall have Size=0, in order not to increase the column with. My trials don't work, the text is still visible here:
<HTML>
<HEAD>
<TITLE>sortable table</TITLE>
<SCRIPT src="SortTable.js"></SCRIPT>
</HEAD>
<BODY>
<TABLE CLASS=sortierbar BORDER=1 WIDTH=100% SOLID=1 STYLE='font-size:10pt; empty-cells:show;'>
<THEAD>
<TR>
<TH CLASS=sortierbar WIDTH=8%>Idx - Id</TH>
<TH CLASS=sortierbar WIDTH=3%>Grid</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1 - 2630194544</TD>
<TD>2015-01-01 2268 </TD>
<TD>2021-02-25T18:26:05Z</TD>
<TD STYLE=text-align:center>23<font size=0><I>Walter"</I></font></TD>
</TR>
<TR>
<TD>2 - 9570194548</TD>
<TD>2015-01-01 2268 </TD>
<TD STYLE=text-align:center>62<font size=0><I>Peter</I></font></TD>
</TR>
<TR>
<TD>3 - 2630194548</TD> <TD>2015-01-01 2268 </TD>
<TD STYLE=text-align:center>23<font size=0><I>Susan</I></font></TD>
</TR>
</BODY>
</HTML>
my working solution: Created a new entry in the relevant CSS, there size=0 works:
H9
{ font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0pt;
font-weight: normal;
font-style: normal;
margin-top: 0pt;
margin-bottom: 0pt;
text-decoration:none;
background-color: transparent;
color: #0F408D}
Related
I'm trying to format this HTML table so that the Total: and resulting dollar amount are aligned under the Price Total column:
enter image description here
<table style="font-size: 12px; font-family: sans-serif; height: 106px;" width="750" cellpadding="0">
<tbody>
<tr>
<td><strong>SKU</strong></td>
<td><strong>Quantity</strong></td>
<td><strong>Price Each</strong></td>
<td><strong>Price Total</strong></td>
</tr>
<!--
#set($total = $utils.newBigDecimal("0.00"))
#foreach($lineItem in $record.lineItems)
#set($item = $scriptOutput.itemMap.get($lineItem.sku))
#set($quantityBigDecimal = "")
#set($quantityBigDecimal = $utils.newBigDecimal($lineItem.orderedQty.toString()))
#if($lineItem.unitCost)
#set($extended = $lineItem.unitCost.multiply($quantityBigDecimal))
#set($total = $total.add($extended))
#end
-->
<tr>
<td>$lineItem.sku</td>
<td>$lineItem.orderedQty</td>
<td>$lineItem.unitCost</td>
<td><span id="autocomplete"><span id="autocomplete-delimiter">$</span></span><span style="text-align: right;">$utils.nvl($utils.formatMoney($lineItem.unitCost), "--")</span></td>
</tr>
<!--
#end
-->
<tr>
<td style="font-weight: bold; border-top: 1px solid black; text-align: center; " colspan="4">Total: $utils.formatMoney($total)</td>
</tr>
</tbody>
</table>
I've tried non-breaking space on the last td to try to "shift" the total text and amount over, tried making row I'm trying to shirt a tfooter, and various align and align-text style elements, but no luck.
I'm very new to HTML, so I'm positive there's something I don't know about that I should be doing, but with my limited experience, I'm finding my searches not turning any useful returns either.
Please help me get on track to adjusting this formatting.
<table style="font-size: 12px; font-family: sans-serif; height: 106px;" width="750" cellpadding="0">
<tbody>
<tr>
<td><strong>SKU</strong></td>
<td><strong>Quantity</strong></td>
<td><strong>Price Each</strong></td>
<td><strong>Price Total</strong></td>
</tr>
<tr>
<td>77-1F</td>
<td>2</td>
<td>6.1706</td>
<td><span id="autocomplete"><span id="autocomplete-delimiter">$</span></span><span style="text-align: right;">6.17</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td style="font-weight: bold; border-top: 1px solid black;" >Total: 14.01</td>
</tr>
</tbody>
</table>
I'm trying to add 3 columns under 'Top 10' table header but when I add values for cells everything gets corrupt
also there's an empty cell just before the 'ID' cell, I don't know where it came from
<html>
<head>
<title>ss</title>
<style>
table { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }
</style>
</head>
<body>
<center>
<table border="1">
<thead>
<tr>
<th align="center">
<font face="Arial, Helvetica, sans-serif"></font>
</th>
<th align="center">
<font face="Arial, Helvetica, sans-serif">Site</font>
</th>
<th colspan="4" align="center">
<font face="Arial, Helvetica, sans-serif">Top 10</font>
</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif">1</font>
</td>
<td align="center">
<font face="Arial, Helvetica, sans-serif">example</font>
</td>
<td>
<td>ID</td>
<td >Name</td>
<td>From</td>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
your help is appreciated
The HTML of your table is completely off. Make sure you use the right elements and close everything too. And try to apply styling with CSS as much as possible.
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
}
<table>
<thead>
<tr>
<th></th>
<th>Site</th>
<th colspan="3">Top 10</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">Example</td>
<td>ID</td>
<td>Name</td>
<td>From</td>
</tr>
<tr>
<td>1</td>
<td>Kobo</td>
<td>Jack</td>
</tr>
</tbody>
</table>
you really need to read html specification, font and center tags have several years obsolete, you need to use CSS instead
<!DOCTYPE html>
<html>
<head>
<title>ss</title>
<style>
body {font: "Arial, Helvetica, sans-serif"}
table { width: 90%; border-collapse: collapse; margin: 0 auto;}
td { border: 1px solid #000; }
td.center, th { text-align: center;}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th colspan="4">Header 3</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td class="center">Cell 1</td>
<td class="center">Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody>
</table>
</body>
</html>
What is the proper way to create the table with HTML and CSS like in the image below?
I am struggling with this task for hours now...
The problem is that I don't know how to organize row in the table to have layout like in the image below, all items should be in one row, but I have managed to have all in the separate row.
HTML:
<table class="testTable">
<thead>
<tr>
<th>
<strong>Order</strong>
</th>
<th>
<strong>Operation</strong>
</th>
<th>
<strong>Times</strong>
</th>
<th>
<strong>Quantities</strong>
</th>
<th>
<strong>Date</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bottom-border">Kamera</td>
<td class="bottom-border" style="color: green;">
<strong>PRODUCTION</strong>
</td>
<td class="bottom-border">7:85</td>
<td class="bottom-border" style="color: green;">GOOD</td>
<td class="bottom-border">26.06.2018.</td>
</tr>
<tr>
<td>Kaciga</td>
<td style="color: orange;">Undefined</td>
<td>7</td>
<td style="color: orange;">SCRAP</td>
<td>26.06.2018.</td>
</tr>
<tr>
<td>Ventil</td>
<td style="color: yellow;">Planned</td>
<td>11</td>
<td style="color: yellow;">REWORK</td>
<td>26.06.2018.</td>
</tr>
<tr>
<td>13</td>
<td style="color: red;">UnPlanned</td>
<td>15</td>
<td style="color: red;">Destroyed</td>
<td>26.06.2018.</td>
</tr>
</tbody>
</table>
CSS:
.bottom-border { border-bottom: solid 1px black; }
.testTable{
font-family: Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
/* Define the default color for all the table rows */
.testTable tr{
background: #f7f6f6;
}
/* Define the hover highlight color for the table row */
.testTable tr:hover {
background-color: #6d7272;
}
Thank you
To provide a slightly more constructive answer, for you to use as a starter for 10. You can utilise CSS3 :nth selectors.
For example:
Selecting odd and even rows:
tr:nth-child(even)
tr:nth-child(odd)
Selecting the first two rows:
tr:nth-child(-n+2)
Read more about nth-child()
I'm thinking this should be simple but I'm having massive problems getting something to work.
I basically want to create a table with a cell of fixed width which brings in data from a database whilst preserving line breaks and wraps the text should it be wider than the table width. It's for a helpdesk notification so the text could be details or a request or a link to a particular website etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 14px">
<table style="width: 700px; border: 20px solid #00AB66;table-layout:fixed">
<tr>
<td style="text-align: center">LOGO</td>
</tr>
<tr>
<td bgcolor="#000000" style="text-align: center; color: #FFFFFF; font-size: 18px">
Review Request</td>
</tr>
<tr>
<td>Dear XXXX<br />
The Service desk have xxxxx</td>
</tr>
<tr>
<td bgcolor="#000000" style="color: #FFFFFF; text-align: center; font-size: 18px">
Request Summary</td>
</tr>
<tr>
<td>
<table style="width: 100%;table-layout:fixed">
<tr>
<td style="text-align: right; width: 158px">ID:</td>
<td>XXXXX</td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Title:</td>
<td>XXXXX</td>
</tr>
<tr>
<td style="text-align: right; width: 158px"><strong>Description</strong></td>
<td>
<pre style="font-size:14px;font-family:'Trebuchet MS';word-break:break-all;white-space: pre; width:75%">
dfdsfdsfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</pre></td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Requested By:</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Review Instructions:</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
The template should support outlook and web based email like office 365. This is what currently happens.
With the white-space:pre-wrap in as instructed, the preview in expression web is this. Could it be the tool which is the issue?
Removing the <pre> and moving the inline styling to the nested <td> fixed this for me as well as removing the inline styling white-space: pre; fixed this for me.
Testing this section with a 144 character fake word is also bound to cause issues when you test an email since some devices wont break that into hyphens for multiple lines.
You may also want to consider using spacers for the sides to maintain consistency.
I am just trying out a simple table format but it's been giving me headache
The table has a fixed height, and the items is supposed to be aligned to the top. With empty spaces below if there is excess space.
Current Code
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
</table>
EDIT:
I think i wasn't clear with what I want earlier, what I want is not just for the TD to valign top, its for the whole cell to be valigned to the top of the table without each of them having the average height of the table.
This looks exactly like you want in your second picture:
<div style='width: 100%; height: 250px; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext;'>
<table width='100%'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card:</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
</table>
</div>
https://jsfiddle.net/83drLumk/2/
You may as well reset tr display unless you have some colspan involved wich might need tuning to be done.
tr{
display:table;
width:100%;
table-layout:fixed;
}
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
<tr><td style="text-align:center; background:#eee">add more content and rows to let that table grow itself once bottom reached</td></tr>
</table>
Since answer is already given, mind it as an alternative
another answers says: add empty elements, wich actually is a good tip too, but via :after it wouldn't bother the markup.
tr {
height:1%;
}
table:after {
content:'';
display:table-row;
}
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
</table>
You need to apply vertical align value to the <td> element
td {
vertical-align: top;
}
Also noticed you should add colspan on the only <td>, in first <tr>
<td colspan="2" style='vertical-align: top;'>
<b><u>Sim Card :</u></b>
</td>
Edit:
Just saw you updated question. You can just create some empty cell and add them before the end of the table. Also remove the height value on the table.
<tr>
<td colspan="2">
</td>
</tr>
Updated demo http://jsfiddle.net/q8e78cL0/
Edit 2:
#GCyrillus also pointed out a better way by using pseudo element to create the blank space, so no need to touch the markup.
table:after {
content: '';
display: table-row;
height: 100px;
}
Demo here http://jsfiddle.net/q8e78cL0/2/
The vertical-align CSS property in not inherited by default. Apply the vertical-align: top property to the td elements directly.
Here is the correct way
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
<td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
<td><b>Phone Number</b></td>
<td><b>4G</b></td>
</tr>
<tr>
<td>55555555</td>
<td>YES</td>
</tr>
<tr>
<td>66666666</td>
<td>YES</td>
</tr>
<tr>
<td>77777777</td>
<td>NO</td>
</tr>
</table>
And here is a working demo fiddle for you. Just copy and paste the demo css and html
https://jsfiddle.net/wgrLfxg3/13/
I can't comment yet so I'll have to do it this way.
You're giving your table a fixed height, which is exactly what causes the thing you want to remove. The auto calculated height of your rows. If I were you I would remove that table height and put a div around the table with a fixed height to give you the border you want.
td {
vertical-align: top;
line-height: 2.0 !important
}