Here's my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credit Balance</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 id="idInput">Account </h1>
<table>
<thead>
<tr>
<th>Balance</th>
<th>Charges/Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td id="balance">filler</td>
<td id="chargeCredit"> filler</td>
</tr>
</tbody>
</table>
<script src="accountprompt.js"></script>
<script src="index.js"></script>
</body>
</html>
and here's the CSS
h1 {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-weight: 500;
}
table,
th,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
font-weight: lighter;
font-family: Arial, Helvetica, sans-serif;
}
I've tried deleting my CSS or JS, but I can't get the borders to return... when I went to bed last night I swear it was working fine, but I must have edited something and gone to bed!
When I went to https://jsfiddle.net/6a0opv7d/ and put your code, I saw the borders. Maybe you need to clear your cache and reload. That can be done by doing Shift + F5 on Windows. Or make sure that your CSS is linked properly, although all the other CSS is working.
table, th, td {
border: 1px solid black;
}
Related
I'm working on my html checklist, to later print out with dynamic text.
However to don't split tables in the middle of a category i created a pagebreaker. In my other htmls it works just fine but in this one its erasing. I guess it has to do with div style category, but even after changing to other tags like it still creates 20.000-30.000 pages (according to chrome or edge)
Here is my code:`
<!DOCTYPE html> <!--Information für den Browser um welches Dokument es sich handelt-->
<html lang="de"> <!--//zuordnung der Sprache-->
<head>
<meta charset="utf-8"> <!--ä, ü, ö möglich-->
<title>Überschrift</title> <!--Tab-Überschrift-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--responsive-->
<style type="text/css">
* {
font-family: Arial, Helvetica, sans-serif;
}
table,
tr,
td {
border: 1px solid #054F9D;
border-collapse: collapse;
}
td {
padding: 0.2rem;
max-width: 12rem;
min-width: 12rem;
word-wrap: break-word;
}
.grey {
background-color: lightgrey;
min-width: 12.5rem;
max-width: 12.5rem;
}
p {
font-weight: bold;
padding-top: 2rem;
}
div {
display: flex;
gap: 100px;
}
#media print {
.pagebreak {page-break-before: always;} /*Seitenumbruch*/
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td class="grey">Text1:</td>
<td>...</td>
</tr>
<tr>
<td class="grey">Text2:</td>
<td>...</td>
</tr>
<tr>
<td class="grey">Text3:</td>
<td>...</td>
</tr>
</table>
<table>
<tr>
<td class="grey">Text4:</td>
<td>...</td>
</tr>
<tr>
<td class="grey">Text5:</td>
<td>...</td>
</tr>
<tr>
<td class="grey">Text6:</td>
<td>...</td>
</tr>
</table>
<div class="pagebreak"></div>
</div>
</body>
</html>
`
And the amount of pages:24.500
Thank you in advance!
i tried changing from div to section, but nothing happened.
I copied the pagebreak directly from my other codes where it workes.
I am trying to send an email using my python code. which generates the following html and send using python.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
<tr><td>p</td><td>q</td><td>r</td></tr>
</table>
</body>
</html>
This shows really nice table in browser.. However in outlook I don't see style sheet applied for table.
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;
}
I currently use the following HTML to render the image shown below. This however does not work in Outlook as background images are not supported. I have been tipped to use tables to render elements correctly in outlook, but have no idea how to go about this. 200 bounty to the person who provides the html that will render the image below correctly in Outlook 2007/2010"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
div, p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
div.box {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color:rgb(255,232,0);
}
div.box div.inner {
height:100%;
background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<p class="name">John</p>
<p>XYZ Company</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
table {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color: #fee800;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<table>
<tr><td>John Smith</td><td></td></tr>
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr>
</table>
</body>
</html>
For emailer You should have to use table and don't use CSS in head or different CSS. Try to use and inline CSS.
<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;">
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td> </td>
</tr>
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td>
</tr>
</table>
I have a very stupid problem: I want a field inside a table, which has 100% of the Table-Cell height. The Problem is the IE-Browser, which won't do that. On Chrome etc. it works (Firefox too I think). Here is a sample html-File:
<?xml version='1.0' encoding='UTF-8' ?>
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
body {
background-color: #ffffff;
font-size: 12px;
font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
color: #000000;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
border: medium none;
}
table.subTable td {
border-width: 0px;
padding: 0px;
margin: 2px;
}
.ui-slottable table {
height:100%;
width:100%;
}
.ui-slottable-slot {
width:100%;
height: 100%;
border-radius: 5px;
border-width:1px;
border-style:solid;
border-color: #cccccc;
background-color:#eeeeee;
border-collapse: separate;
}
</style>
</head>
<body>
<div class="ui-slottable">
<table>
<tbody>
<tr>
<td>
<div class="ui-slottable-slot">
<table class="subTable" style="margin:2px;">
<tbody>
<tr>
<td>T1 Hallo</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class="ui-slottable-slot">
<table class="subTable">
<tbody>
<tr>
<td>T2 Hallo</td>
</tr>
<tr>
<td>Halloggggggggggggggggggg</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In this File The Field T1 should have the same height as T2.
I've tested a lot of different way's, but nothing worked...
Hope someone can tell me how IE makes this...
Attempting to set height usually does not work.
You can get the same height for the fields by using 2 lines in the innermost table for T1, too. (Use nbsp as contents of the extra line.) Then remove the style="margin:2px;" inside the table html tag.