why is my css not making the text bold and red - html

<tr style="background-color:yellow">
<td style="color:red font-weight:bold">
SERVER1
</td>
<td style="color:red">
Sampler
</td>
<td style="color:red">
Offline
</td>
<td style="color:red">
No
</td>
</tr>
Can anyone please tell me why my text isn't bold and red? if I use 1 css style then it seems to work fine


You need to end your style property with a semicolon ; if you have multiple properties.
<tr style="background-color:yellow;">
<td style="color:red; font-weight:bold;">
SERVER1
</td>
<td style="color:red;">
Sampler
</td>
<td style="color:red;">
Offline
</td>
<td style="color:red;">
No
</td>
</tr>

Related

Force an element to take exactly half of available height in print media

I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>

Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO

How to make two equal columns in a table

I have following table:
I can't make To and from columns to be equal - they should be half of row. I tried many different colspan cases, but these tds are not half of row.
How could I do that?
<table>
<tr>
<td colspan="5">
some text
<br>
</td>
<td colspan="6">
another text
<br>
</td>
<td colspan="6">
Logo
<br>
</td>
</tr>
<tr>
<td colspan="8"> </td>
</tr>
<tr>
<td style="position: relative; font-size: 13px;" colspan="12">
some text
</td>
</tr>
<tr style="height:30px;">
<td> </td>
</tr>
<tr>
<td colspan="6">
<?php echo 'To');?>:</td>
<td colspan="6">
<?php echo 'From';?>:</td>
</tr>

First of all you need to understand the colspan property. colspan is used to manage the span of child col with respect to parent. This means if first has three and next has ONE , it means it needs colspan TWO to get in line with parent. You can find this by border='1' property to table
See here
<table border="1">
<tr>
<td>
some text
<br>
</td>
<td >
another text
<br>
</td>
<td>
Logo
<br>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td style="position: relative; font-size: 13px;" colspan="3">
some text
</td>
</tr>
<tr style="height:30px;">
<td colspan="3"> </td>
</tr>
<tr>
<td><?php echo 'To');?>:</td>
<td colspan="2">
<?php echo 'From';?>:</td>
</tr>
Above you cans see my max colspan is THREE since the first has three rows
Check this fiddle http://jsfiddle.net/anandgh/y1gsqeq6/

Why HTML rowspan not working?

I want to put percent at the right in 2 rows cell, but seems like something wrong here:
<table>
<tr>
<td>
<b style="color: #333;margin-left: 65px;">True Negative</b>
</td>
</tr>
<tr>
<td style="border-top: 2px black solid;">
<b style="color: #333;">(True Negative + False Positive)</b>
</td>
<td rowspan="2">
<b style="color: #333;">x 100 %</b></td>
</tr>
</table>
https://jsfiddle.net/8cr7ergj/

rowspan is the span of rows starting with the current. As your cell is in the last row, there is no other row it could span to. I think, you want something more like this:
<table>
<tr>
<td>
<b style="color: #333;margin-left: 65px;">True Negative</b>
</td>
<td rowspan="2">
<b style="color: #333;">x 100 %</b>
</td>
</tr>
<tr>
<td style="border-top: 2px black solid;">
<b style="color: #333;">(True Negative + False Positive)</b>
</td>
</tr>
</table>

Like that ?
https://jsfiddle.net/qnxorbx3/
<table>
<tr>
<td>
<b style="color: #333;margin-left: 65px;">True Negative</b>
</td>
<td rowspan="2">
<b style="color: #333;">x 100 %</b></td>
</tr>
</tr>
<tr>
<td style="border-top: 2px black solid;">
<b style="color: #333;">(True Negative + False Positive)</b>
</td>
</table>

HTML breaking up in Outlook but renders well without breakup in browsers

I have developed an HTML mailer which has to render in outlook it work fine in all browsers but breaks when I render in Outlook. Please see the below link to get the code.
http://jsfiddle.net/Z8xFn/
<body>
<table class="mailer-document" cellpadding="0" cellspacing="0">
<tr>
<td class="header">
<img src="top green and blue lines.jpg" alt="header" />
</td>
</tr>
<tr class="content-bg">
<td>
<p class="welcomecontent">Hi <span class="username">KELLY DEANNA,</span></p>
</td>
</tr>
<tr class="content-bg">
<td>
<p class="welcomecontent"><span>Federation Request has been raised by</span>
<b>Renu V Menon</b> <span>and its in your cart for approval</span></p>
</td>
</tr>
<tr class="content-bg">
<td>
<p class="details">Following are the details of the request for your reference:</p>
</td>
</tr>
</table>
<table class="details-table" cellpadding="0" cellspacing="0">
<tr>
<td class="details-left" width="185px">
<span class="RequestID">
Request ID
</span>
</td>
<td class="details-right" width="auto">
<span class="Details">: 30147633 </span>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Associate ID
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: 394163 </p>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Project Name
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: Domain </p>
</td>
</tr>
<tr>
<td class="details-left" width="185px">
<p class="RequestID">
Domain Name
</p>
</td>
<td class="details-right" width="auto">
<p class="Details">: Domain#tech.com </p>
</td>
</tr>
</table>
</body>

In your table, tr and td tags add:
border="0"
and add this into your head:
<style type="text/css">
table {border-collapse: collapse;}
</style>
I hope this helps :)

HTML Table appears distorted in Outlook Email

I've created an email template and this email gets sent to outlook 2010 from my application(Oracle UCM).Issue is my workflow history table (code below) gets distorted and moves to left when checked on any mobile device However the entire email looks good when seen on a desktop.
<table border="1"cellspacing=0 cellpadding=0 width="95%" align="center">
<tr>
<td align="center" colspan="2" style='width:10.0%; background:#A5CEF7'>
<p><span style='font-size:18.0pt;font-family:"Calibri","sans-serif";color:red'>DMS</span><span style='font-size:15.0pt;font-family:"Calibri","sans-serif";color:red'> - <$xSubDocType$> document for <$xClientName$> PID: <$xProject_ID$> is in your workflow </span></p>
</td>
</tr>
<tr>
<td align="left" colspan="2" style='width:10.0%;font-family:"Calibri","sans-serif";background:#A5CEF7;font-size:12.0pt'>
<p>
<b>
Click on Approve or
Reject to take action on this document through email.Please remove your signatures(if any)</b><br><br>
</span>
<span style='font-size:10.0pt;font-family:"Calibri","sans-serif";color:red;align="center"'>** Please note: Do not make any changes</span>
</p>
</td>
</tr>
<tr>
<td rowspan="2" width="40%";height="1000" style='background:#E6E6D8;min-width:200px'>
<p style="padding-left:10px">
<span style='font-size:12pt;font-family:Calibri,sans-serif;color:black;font-weight:bold;left:500px'>
<b><u>Content Info</u> </b></span><br>
<br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Content ID: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dDocName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Document Owner: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$UserFullName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Client: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$xClientName$></span><br>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
<b>Project Name </b></span>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$xProjectName$></span><br>
</p>
<p style="font-family:Calibri,sans-serif;font-size:10pt;padding-left:15px">
<$if IsNotifyOnly or wfAction like "APPROVE"$>
[ <a href="<$HttpCgiPath$>?IdcService=DOC_INFO&idcToken=<$idcToken$>&dID=<$dID$>&dDocName=<$url(dDocName)$>&Auth=Intranet" style="color:993333;width:300px;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("wwDocumentInfo")$></a> ]</p>
<$else$>
[ <a href="<$HttpCgiPath$>?IdcService=REVIEW_WORKFLOW_DOC&idcToken=<$idcToken$>&dDocName=<$url(dDocName)$>&Auth=Intranet" style="color:993333;width:300px;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("wwWfReviewWorkflowItem")$></a> ]</p>
<$endif$>
</td>
</tr>
<tr>
<td align ="center" vertical-align="top" width="60%" style='background:#E6E6D8;min-width:600px'>
<p style="padding-left:10px">
<!-- <td align ="center" vertical-align="top" width="60%" bgcolor="#E6E6D8"> -->
<div style="display:none">
<$executeService("GET_SENDTOWORKFLOW_HISTORY_EMAIL_DETAILS")$>
<$numrowSTOWFH = rsNumRows("SendtoWorkflowActionHistory")$>
<$executeService("GET_WORKFLOW_HISTORY_EMAIL_DETAILS")$>
<$numrowWFH = rsNumRows("WorkflowActionHistory")$>
<$if numrowWFH gt 0$>
<$rsRename("WorkflowActionHistory", "rsNewName")$>
<$else$>
<$rsRename("SendtoWorkflowActionHistory", "rsNewName")$>
<$endif$>
</div>
<span style="font-family:Calibri,sans-serif;font-size:12pt">
<b>Reason: </b></span>
<span style="font-family:Calibri,sans-serif;font-size:12pt;color:blue">
<b><$if xPurposeForSubmission$><$getFieldViewValue("xPurposeForSubmission",xPurposeForSubmission,"Reason")$><$endif$></span></b><br><br>
<table style="position:absolute;width:97.0%;left:145px" cellpadding="3" cellspacing="0" id="Table2">
<tr>
<td style="font-family:Calibri,sans-serif;font-size:12pt" colspan="7">
<b>Recent workflow history (Maximum Last 5)</b>
</td>
</tr>
<tr>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:130px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action Date</b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:140px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action By </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:70px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:150px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action Type </b></span></div>
</td>
<td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:250;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Comments</b></span></div>
</td>
</tr>
<$loop rsNewName$>
<tr>
<!-- ACTION DATE cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:130px;height:1px;">
<div class="xuiListCellDivCenter" nowrap><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dActionDate$> </span></div>
</td>
<!--Send To cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:100px;height:1px;">
<div class="xuiListCellDivCenter" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$if strLength(getValueForSpecifiedUser(xWF_SendTo, "dFullName")) gt 0 $>
<$getValueForSpecifiedUser(xWF_SendTo, "dFullName")$>
<$else$>
<$xWF_SendTo$>
<$endif$> </span></div>
</td>
<!-- ACTION cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:70px;height:1px;">
<div class="xuiListCellDivCenter" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
<$dAction$> </span></div>
</td>
<!-- Approval Type cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:150px;height:1px;">
<div class="xuiListCellDiv" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal"><$ApprovalType$> </span></div>
</td>
<!-- Comments cell -->
<td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:250px;height:1px;">
<div class="xuiListCellDiv" nowrap>
<span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal"><$strSubstring(xWorkflowComments,0,100)$> </span> </div>
</td>
</tr>
<$endloop$>
<tr>
<td colspan="2">
[<a href="<$HttpCgiPath$>?IdcService=GET_WORKFLOW_HISTORY_BYNAME&idcToken=<$idcToken$>&dID=<$url(dID)$>&dDocName=<$url(dDocName)$>" style="color:993333;width:50px;font-size:10pt;font-family:Calibri,sans-serif;font-weight:normal">
<$lc("View detailed workflow history")$></a>]
</td>
</tr>
</table>
</td>
</tr>
</table>

position:absolute; set at line 80 caused the table to take a fixed position and hence the issue.
also height="1000" set further set the column's height.Removed it and I'm happy now

Please remove rowspan="2" from below td, There should not be rowspan.
HTML
<td rowspan="2" width="40%" ;height="1000" style="background:#E6E6D8;min-width:200px">