The snippet below actually produces a table similar to what I want when it runs here, but the output RTF file shows a different table without the inside borders. How could this be?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="Generator" content="SAS Software Version 9.3, see www.sas.com">
<meta http-equiv="Content-type" content="text/html; charset=windows-1252">
<title>SAS Output</title>
<style type="text/css">
<!--
.table {
color: #000000;
font-family: 'Arial', 'Arial';
font-size: 10pt;
font-style: normal;
font-weight: normal;
border: medium double black;
}
.proctitle{
color: #000000;
font-family: Arial, 'Albany AMT', Arial;
font-size: x-small;
font-style: normal;
font-weight: bold;
}
.systemtitle{
font-family: Arial, 'Albany AMT', Arial;
font-size: large;
font-weight: 14pt;
color: black;
}
.header, .rowheader, .footer, .rowfooter{
color: black;
font-size: 10pt;
font-family: Arial, 'Albany AMT', Arial;
background-color: #ffffff;
font-weight: bold;
text-align: center;
vertical-align: middle;
padding: 10px;
}
.data{
font-size: 10pt;
font-family: Arial, 'Albany AMT', Arial;
background-color: #ffffff;
text-align: center;
vertical-align: middle;
padding: 10px;
}
.l {text-align: left }
.c {text-align: center }
.r {text-align: right }
.d {text-align: right }
.j {text-align: justify }
.t {vertical-align: top }
.m {vertical-align: middle }
.b {vertical-align: bottom }
TD, TH {vertical-align: top }
.stacked_cell{padding: 0 }
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function startup(){
}
function shutdown(){
}
//-->
</script>
</head>
<body onload="startup()" onunload="shutdown()" class="body">
<script language="javascript" type="text/javascript">
<!--
var _info = navigator.userAgent
var _ie = (_info.indexOf("MSIE") > 0
&& _info.indexOf("Win") > 0
&& _info.indexOf("Windows 3.1") < 0);
var _ie64 = _info.indexOf("x64") > 0
//-->
</script>
<div class="branch">
<a name="IDX"></a>
<table class="systitleandfootercontainer" width="100%" cellspacing="1" cellpadding="1" rules="none" frame="void" border="0" summary="Page Layout">
<tr>
<td class="c systemtitle">Example Title Here</td>
</tr>
</table><br>
<div>
<div align="center">
<table class="table" cellspacing="0" cellpadding="5" rules="all" frame="box" bordercolor="#C1C1C1" summary="Procedure Print: Data Set WORK.TEST">
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="l header" scope="col">CAR</th>
<th class="r header" scope="col">YEAR</th>
</tr>
</thead>
<tbody>
<tr>
<td class="l data">FORD</td>
<td class="r data">1995</td>
</tr>
<tr>
<td class="l data">HONDA</td>
<td class="r data">1998</td>
</tr>
<tr>
<td class="l data">CHEVY</td>
<td class="r data">2001</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
However, this produces a table as such:
I'd like for it to look like:
I created the following dataset and used ODS RTF and my custom .css file (in this example, called TESTFOX) to output the table:
DATA TEST;
INPUT CAR $10. YEAR;
DATALINES;
FORD 1995
HONDA 1998
CHEVY 2001
;
RUN;
ODS RTF FILE="C:\USERS\DOCUMENTS\TEST.RTF" CSSSTYLE='C:\USERS\DOCUMENTS\TESTFOX.CSS';
PROC PRINT DATA=TEST NOOBS;
RUN;
ODS _ALL_ CLOSE;
Use the nth child selector. Css below may work depending on your html structure.
tr:first-child {
border-top: medium double black;
}
tr:first-child {
border-bottom: medium double black;
}
td:first-child {
border-left: medium double black;
}
td:last-child {
border-right: medium double black;
}
EDIT
After the original poster added some details, here is a possible way to get the inner border.
td, th {
border: thin solid black;
}
Related
I created a Prediction table for my website but I want an automatic updated for my table from livescore. Please can anyone help me with the right code
This is the html table
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<tr>
<th colspan="2"><b>England » Premier</b></th>
<th><b>Prediction</b></th>
</tr>
<tr>
<td> 24-06:20:16</td>
<td>Red Bull Bragantino <b style="color:red"> 2 : 1 </b> Ponte Preta</td>
<td <td style="background-color:none;color:none;"><b>Home Win</b></td>
</tr>
</table>
</body>
</html>
This is the css code
table,
th,
td {
border: 0px solid black;
border-collapse: collapse;
}
table {
width: px;
}
th {
color: white;
background-color: black;
}
th,
td {
font-size: 25pt;
font-family: Arial;
text-align: center;
}
td {
background-color
I'm trying to create a new HTML signature for our company, but I can't seem to get it work nicely on Gmaill app (Android in my test case). Both font-size and line-height changes. I tried different stuff, even deleted the whole HTML signature and try to make a new one with just a few lines to test, but unfortunately I can't get it to work. I tried so many things, that I just have no clue anymore how to fix. I also tried to search for the problem, but I still can't seem to make it work. Please see attached code.
If anyone can help me into the right direction, that would be great. I also included screenshots to show what I mean regarding the Gmail app. As you can see, also text-size is different.
https://imgur.com/mxtU4Bs
https://imgur.com/RXKQt9w
Thanks in advance!
<html>
<head>
<meta charset="utf-8">
<title>html signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {margin: 0px; padding: 0px; }
img { border: 0px; }
a { color: #00002E; text-decoration: none; }
h1.title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 5px; }
span.function { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
#wrapper { width: 100%; max-width: 470px; }
#border { border-left: 1px solid #00002E; }
table.functiondetails { width: 100%; margin-top: 5px; }
table.functiondetails tr { height: 30px; }
table.functiondetails tr td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
table.functiondetails tr td.icon { width: 10%; }
table.functiondetails tr td.detail { width: 90%; }
#media screen and (max-width: 768px) {
#wrapper { width: 90%; }
#logoColumn { width: 30%; max-width: 30%; }
#logoColumn img { width: 100%; }
#functionColumn { width: 70%; max-width: 70%; }
}
#media screen and (max-width: 470px) {
#wrapper{ width: 100%; }
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="logoColumn">
logo
</td>
<td id="border"></td>
<td id="functionColumn">
<h1 class="title">Name of employee</h1>
<span class="function">Function | Company</span>
<table class="functiondetails" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-phone.jpg" alt="Bel ons" width="13" height="13"></td>
<td class="detail">+31 (0)6 - 12345678<br>+31 (0)162 -123456</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-email.jpg" alt="Mail ons" width="13" height="13"></td>
<td class="detail">email#domain.nl</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-location.jpg" alt="Adresgegevens" width="13" height="13"></td>
<td class="detail">Address line 1<br>Address line 2</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-arrow.jpg" alt="Website" width="13" height="13"></td>
<td class="detail">domain.nl</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[1]: https://imgur.com/mxtU4Bs
Campaign Monitor can tell you a lot of information about what CSS properties are supported by the different email platforms. On there it mentions that font-size and line-height are almost universally supported. But it says that style tags in the head or body are not entirely supported, and there is very low support for linked CSS. So your best bet is to try inline styles.
https://www.campaignmonitor.com/css/text-fonts/line-height/
One downside of only using inline styles however is that you can't use media queries. So you could still leave the media queries in a style tag, but they just won't be used by every platform.
I have an HTML table with lots of cells in it. Some of these cells should be flagged as warning, others as alert.
I have come up with the following HTML/CSS to do something like this.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: right;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
Which displays the text like...
However, I want it to display with the little flag immediately to the right of the text, like this...
If I change the CSS to specify float: left; this then displays the flag before the text.
The reason I want it aligned to the right of the text, is that depending on the width of the column, it might not be obvious which text is being flagged.
ps. I've included the td width/height just so that I can demonstrate what I'm trying to do, there's also no table borders in my final design.
You can avoid making your circle narrow by using display:inline-block; and remove the float all together.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
display: inline-block;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
The primary difference between a <div> and a <span> is how they affect the layout.
A <div>, by default, is a block element and wants to live on its own line.
A <span>, by default, is a inline element and will sit next to the element before and after it.
Changing to a <span> and getting rid of the float will solve the problem. Though you do need to set its display value to something like inline-block to allow the width and height values to work correctly.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<span class='circle'>I</span>
</td>
</tr>
</table>
</body>
</html>
Please make Couple of adjustments to your code:
Change:
hello
To:
<div style="float:left;">hello</div>
And In CSS
Change:
float:right;
To
float: left;
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: left;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30><div style="float:left;">hello</div>
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
I'm very new to HTML and CSS. This is an example directly taken from Jon Duckett's book.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
table {
width: 600px;}
th, td {
padding: 7px 10px 10px 10px;}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;}
tr.even {
background-color: #efefef;}
tr.hover {
background-color: #c3e6e5;}
.money {
text-align: right;}
</style>
</head>
<body>
<h1>First Edition Auctions</h1>
<table>
<tr>
<th>Author</th>
<th>Title</th>
<th class="money">Reserve Price</th>
<th class="money">Current Bid</th>
</tr>
<tr>
<td>E.E. Cummings</td>
<td>Tulips & Chimneys</td>
<td class="money">$2,000.00</td>
<td class="money">$2,642.50</td>
</tr>
<tr class="even">
<td>Charles d'Orleans</td>
<td>Poemes</td>
<td class="money"></td>
<td class="money">$5,866.00</td>
</tr>
<tr>
<td>T.S. Eliot</td>
<td>Poems 1909 - 1925</td>
<td class="money">$1,250.00</td>
<td class="money">$8,499.35</td>
</tr>
<tr class="even">
<td>Sylvia Plath</td>
<td>The Colossus</td>
<td class="money"></td>
<td class="money">$1,031.72</td>
</tr>
</table>
</body>
</html>
You can view the output here, with the hover there also not working.
It looks like the example on his website works fine. I'm not sure what I did wrong in my code. It looks fine.
Browser I'm using is Chrome 48.0.2564.97.
:hover is a pseudo-class.
It is preceded by a colon (:) not a period (.)
Use :hover instead of .hover (.hover matches tag with class="hover")
tr:hover {
background-color: #c3e6e5;}
Your issue is you called out a class instead of declaring a state.
tr.hover {background-color: #c3e6e5;}
Should be
tr:hover {background-color: #c3e6e5;}
The period in your original version calls out a class that doesn't exist.
It should read
tr:hover {background-color: #c3e6e5;}
not
tr.hover {background-color: #c3e6e5;}
I have a table with expand/collapse div elements in td.
When expanding in IE9, all is OK, but in Google Chrome (version 16.0.912.75 m) I get unexpected solid borders on differing spots.
It seems as if the colspan=3 tr's have something to do with this, as the solid borders appear above and under those. Also, the div width values seem to influence this: the behavior changes when choosing other values for these.
See below html. I added 4screen prints: initial view, expand row1, expand row2, expand both.
What is causing this odd behavior and how can I prevent it?
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>Example</title>
<style type="text/css">
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
div.QUAL {
margin-left:4pt;
font-size: 90%;
}
input.buttonQUAL {
color: blue;
background: white;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
div.listQUALdesc {
color: black;
background: white;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse functions based on id
function toggleMe(a){
var e = document.getElementById(a);
if(!e) return true;
if( e.style.display == "none")
{
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
};
function expandByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "block";
}
}
return true;
}
function collapseByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "none";
}
}
return true;
}
</script>
</head>
<body>
<p/>
<table style='table-layout:fixed word-break:break-all'>
<col width="70"><col width="70"><col width="70">
<thead><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr></thead>
<tbody>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row1'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row1"/>
</td>
<td>text1
<div id="row1" class="listQUALdesc" style="width:100; display:none">
text2
</div>
</td>
<td></td>
</tr>
<tr>
<td><div class="QUAL">xxx</div></td>
<td>text3</td>
<td></td>
</tr>
<tr>
<td colspan="3">Start</td>
</tr>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row2'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row2"/>
<div id="row2" class="QUAL" style="display:none;width:65">
text5<br/>
</div>
</td>
<td>text4</td>
<td></td>
</tr>
<tr>
<td colspan="3">End</td>
</tr>
</tbody>
</table>
</body>
</html>
See comments - adding < !doctype html > partly solves the issue
Addition
There are some issues to be found on the web that point at an error in Chrome and Safari (which use webkit) like the following: webkit-colspan-table-border-bug.
It seems that using colspan and bottom-border in combination with border-collapse: collapse leads to border display issues, just as in my example.