I am not very familiar with HTML. Just trying to debug an existing code.
This works fine in IE but not in any other browser like Chrome or Firefox.
<table style="text-align: center;
width: 98%;
left: 0px;
top: 5px;
background-color: #9b9bce;
border: medium double #9b9bce;
border-width: 1px;
bgcolor: #FFFFFF;
background-repeat: no-repeat;
background: #FFFFFF;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;">
<tr>
<td td align="left" style="color : white; font: 30 px; font-weight: bold;">
Test
</td>
</tr>
</table>
Does that mean that these are not supported anymore with newer browsers?
I can get this working the same way in all browsers including IE and Chrome.
<table style="text-align: center;
width: 98%;
left: 0px;
top: 5px;
background-color: #9b9bce;
border-top: 2px solid #f38e23;
border-left:2px solid #f38e23;
border-right:2px solid #f38e23;
border-bottom:2px solid #f38e23;
bgcolor: #FFFFFF;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
">
<tr>
<td td align="left" style="color: white; font: 30 px; font-weight: bold;">
Test
</td>
</tr>
</table>
I cant get the double border thing working that is there in the first one.
Any suggestions?
I believe you need a border width of at least 3px when setting it as double. (1px for each border plus 1px space between)
Do you need this thing?
P.S. There is few examples http://htmlbook.ru/css/border-style
.dbl-border {
border: 3px double blue;
width: 300px;
height: 100px;
}
<div class="dbl-border"> </div>
A nice trick for adding multiple borders to any HTML element is by using box-shadow since it can get multiple comma separated shadows.
<table style="text-align: center;
width: 94%;
left: 0px;
top: 5px;
background-color: #9b9bce;
border: 2px solid #f38e23;
padding: 10px;
margin: 20px;
box-shadow: 0px 0px 0px 5px #0f0, 0px 0px 0px 10px #f00, 0px 0px 0px 15px #00f;">
<tr>
<td td align="left" style="color: white; font: 30 px; font-weight: bold;">
Test
</td>
</tr>
</table>
With that much CSS, you will not want to set that all inline. I would recommend setting a style block in an external file and link it to the html file, or set the style block in the head of the html.
The double border does work, however, it is every narrow. If you zoom, you can see the 2 border styles.
For a stronger effect, I would review pseudo-elements and utilize ":before option to give you more control.
I built a sample codepen for you to view a demo. https://codepen.io/ckroll17/pen/LjPGaj
<style type="text/css">
.myBorder{
border: 3px solid blue;
background-color: #ea4421;
color: #ffffff;
margin: 8% auto;
padding: 15px;
position: relative;
}
.myBorder:before{
background: none;
border: 4px solid black;
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
}
</style>
<table class="myBorder">
<tr>
<td>
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td>consectetur adipiscing elit</td>
<td>sed do eiusmod tempor</td>
<td>Ut enim ad</td>
<td>adipisci velit</td>
</tr>
<tr>
<td>aspernatur aut odit</td>
<td>quae ab</td>
<td>magnam aliquam quaerat voluptatem</td>
<td>consequatur</td>
<td>laboriosam, nisi ut aliquid</td>
<td>Quis autem vel eum iure</td>
<td>reprehenderit qui in ea</td>
<td>Ut enim ad minima</td>
</tr>
</table>
Thanks a lot for all the suggestions. I think I can use this:
<!DOCTYPE html>
<html>
<head>
<style>
.bordered {
width: 98%;
padding: 1px;
border: 5px double #9b9bce;
}
.tablestyle {
background-color: #9b9bce;
width: 100%;
}
</style>
</head>
<body>
<div class="bordered">
<table class="tablestyle">
<tr>
<td style="text-align:left; font-size: 23pt; font-weight: bold;">
Box with a border
</td>
<td style="text-align:right; font-weight: bold;">
SOMETEXT
<br>
Time Here
</td>
</tr>
</table>
</div>
</body>
</html>
Related
I've been trying to edit this table(s) for a few days.
The plan is that the header is always at the top when scrolling. Because everything is configured code, I can not work with typical HTML / CSS. After a long time I have found this (almost) working solution.
That the code looks so ugly is because I got this structure inherited and I haven't had the time to worry about it yet.
The problem that still exists is when the DIV outside is smaller than the table needs, the table contracts. Although the columns actually have a given width. If the div is wide enough outside, then the table looks like it should.
What am I doing wrong?
Maybe someone has an idea or solution ready.
This is how it should look (even if the div is smaller just with scrolling)
https://jsfiddle.net/mzue3j9t
Sample:
<div id="GRD1" style="overflow: auto hidden; display: block; position: absolute; top: 22px; left: 20px; width: 400px; height: 176px; font-family: Tahoma; font-size: 8pt; color: rgb(0, 0, 0); z-index: 1; background-color: threedface; visibility: visible; border: 1px solid rgb(127, 157, 185);">
<table class="header" cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
<thead>
<tr>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 17px; font-weight: normal;" title="undefined"> </th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 48px; font-weight: normal;" title="">Question</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 19px; font-weight: normal;" title="">i.O</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 29px; font-weight: normal;" title="">n.i.O</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 74px; font-weight: normal;" title="">Another check</th>
<th style="white-space: nowrap; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 78px; font-weight: normal;" title="">Commentary</th>
</tr>
</thead>
</table>
<div class="body" style="overflow: hidden auto; height: 100%; width: 100%;">
<table cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
<tbody>
<tr id="row_1">
<td id="GRD1_num_1" style="border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;;width:17px;text-align:right;white-space:nowrap;">1</td>
<td id="GRD1_0_0" row="1" col="1" editable="1" parentid="0" style="width:48px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Test 1</td>
<td id="GRD1_0_1" row="1" col="2" editable="3" parentid="0" checkstate="1" style="width:19px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
</td>
<td id="GRD1_0_2" row="1" col="3" editable="3" parentid="0" checkstate="0" style="width:29px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" value="0">
</td>
<td id="GRD1_0_3" row="1" col="4" editable="3" parentid="0" checkstate="1" style="width:74px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
</td>
<td id="GRD1_0_4" row="1" col="5" editable="1" parentid="0" style="width:78px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 1px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Commentary1</td>
</tr>
</tbody>
</table>
</div>
</div>
and this is how it looks when it is smaller ..
https://jsfiddle.net/mzue3j9t/1
Create it with just 1 table and make th inside thead position sticky.
<table>
<thead>
<tr>
<th style="background:threedface;position: sticky; top: 0;"></th>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
...
</tbody>
</table>
I don't know why you are writing inline styles. Is it an email template?
else please create a separate css file and import it in the html.
I would suggest to clean up your code, remove the style tag from your HTML and create a CSS file for it. Doing that will allow you to debug the problem.
alternatively, I would suggest using some framework for tables which will render you work responsive to the page size, therefore no need to create different classes for each page size. I would use the Framework (https://getbootstrap.com/) however, there are other frameworks.
This is my code
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:40px;line-height:2px;color:red;">◖</td>
<td style="width:80px;height:30px;background-color:red;"></td>
<td style="font-size:40px;line-height:2px;color:red;">◗</td>
</tr>
</table>
Fiddle Example
What I want to do is to appear my table content as the div below ( with border radius )
<div style="width:120px;height:30px;background-color:red;border-radius:50px;"></div>
I have to do it with table like this because this code will use in html email for Outlook Desktop client which doesn't support border-radius .
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<div style="padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
background-repeat:no-repeat;
transform: rotate(180deg);
height: 186px;
width:90px;
display:inline-block;
">
</div>
<div style="width: 212px;height: 179px;background-color:#c60000;display:inline-block;"></div>
<div style="
padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
height: 186px;
background-repeat:no-repeat;
width:90px;
display:inline-block;
background-position: 0px 7px;
"></div>
</tr>
</table>
JSFiddle
Use images instead of characters.
Completely based on div.
div.my-button{
padding: 12px 18px 12px 18px;
border: 1px solid #e9703e;
background-color: #EB7035;
border-radius: 10px;
font-size: 16px;
margin-top: 20px;
width: 119px;
}
div.my-button a{
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}
<div class="my-button">
I am a button →
</div>
I tried to add a horizontal line inside a <td> tag to achieve :
but this is what I got :
Here is a jsfiddle: http://jsfiddle.net/6qybn8w8/
Please note that I want this <hr /> tag to appear in only few of the <td> and not all. Also, I cannot remove the padding for <td> as I need it to format content of other <td>s
You can do some thing like this.
table {
border: 3px solid #0D94D2;
}
table th,
td {
padding: 4px 10px 4px 5px;
font-size: 12px;
}
table th {
background-color: #0D94D2;
text-align: center;
padding: 0.25em 0.25em;
white-space: nowrap;
}
table td {
width: auto;
text-align: center;
border-bottom: 1px solid #B1DCEA;
white-space: nowrap;
}
hr {
position: relative;
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
width: 118.9%;
left: -6.5%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
One workaround for you to get the expected result without breaking your structure is by using positioning.
Well I've updated the fiddle so you can go through the changes, http://jsfiddle.net/6qybn8w8/2/
HTML:
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
CSS
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;position:relative;
}
table td div{
margin-top:10px;
}
hr{
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
position:absolute;
width:100%;
top:-10px;
left:-1px;
}
Set the height of <hr> as 0 and add margin-top to 5px or whatever that you want.
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;
}
hr{
height: 0em;
border-top: 5px solid green;
margin: 0;
width: 100%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
Updated jsFiddle: http://jsfiddle.net/rdesai/6qybn8w8/5/
I would like to put CSS buttons into several tables. Ideally, each button should fill the corresponding table cell. This presents a problem because if I hard-code the button width in CSS, I would need a separate class for each table dimension.
Is there a way to have the buttons fit into the table cells?
HTML:
<center>
<table border="1" width="90%" class="buttons">
<tr>
<td width="25%">Link1 goes here</td>
<td width="25%">Link2<br>goes<br>here</td>
<td width="25%">Link3<br>goes<br>here</td>
<td width="25%">Link4<br>goes<br>here</td>
</tr>
</table>
<p>
<table border="1" width="90%" class="buttons">
<tr>
<td width="20%">Link1 goes here</td>
<td width="20%">Link2<br>goes<br>here</td>
<td width="20%">Link3<br>goes<br>here</td>
<td width="20%">Link4<br>goes<br>here</td>
<td width="20%">Link5<br>goes<br>here</td>
</table>
</center>
CSS:
.buttons
{
overflow:auto;
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a
{
display: inline-block;
width: 18em;
height: 6em;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
.buttons a:active
{
box-shadow: 1px 1px 0px #888888;
}
Play with the code:
http://codepen.io/anon/pen/bIEtC
You should try to set height and width 100%. Like this:
.buttons a
{
display: inline-block;
width: 100%; /* set to 100% */
height: 100%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
Try not to hard code CSS into the HTML... it leads to a mess of trouble!
Taking the inline styling out of the html seems to fix most problems. Then, just like #ArmanVirdi said, add the width and the height of the link to be 100%.
The <center> tags don't seem to be doing anything, so those are removed in the below HTML, as well as an unclosed <p> tag.
HTML
<table class="buttons width-25">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
</tr>
</table>
<table class="buttons width-20">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
<td>Link5<br>goes<br>here
</td>
</table>
CSS
table {
width: 100%;
}
.width-20 td {
width: 20%;
}
.width-25 td {
width: 25%;
}
.buttons {
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a {
display: inline-block;
height: 100%;
width: 100%;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
}
.buttons a:active {
box-shadow: 1px 1px 0px #888888;
}
JSFiddle for reference
Add to .buttons:
width:0;
Resut:
I have an issue with HTML/CSS rendering in Outlook 2010.
The below HTML renders correctly in all other email clients I have tested (Thunderbird, Outlook 2003, iPhone, various webmail based products), and in various browsers too. But in Outlook 2010 I get a border around the table caption that is the same colour as the background for the tag below it.
<!DOCTYPE html>
<html>
<body>
<div style="padding: 0.3em">
<p>Here is a nice background from St Pancras Station with the Olympic Rings in the background</p>
<hr />
<table style=" width: auto; color: #000; border: 1px solid #000; border-collapse: collapse; background: #FFF;">
<caption style=" font-style: italic; text-align: left; color: #000; background: #FFF;">Files attached to this message</caption>
<tr>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 75%;">6315755363_7fbe95fc66_o.jpg</td>
<td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 25%;">5 MB</td>
</tr>
</table>
<p>Please click here to download the attachments.</p>
<p>The attachments are available until: <b>Tuesday, 11 December.</b></p>
<hr />
</div>
</body>
</html>
Can anyone suggest a fix for this issue?
EDIT
If you want to debug this you can save the HTML in a file and load it into Word 2010 as it uses the same rendering engine.
Try adding phantom row after <caption>
<caption style=" font-style: italic; text-align: left; color: #000; background: #FFF;">Files attached to this message</caption>
<tr style="background:#FFF; display:none;"></tr> <!--phantom row-->
<tr>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th>
</tr>
<!DOCTYPE html>
<html>
<body>
<div style="padding: 0.3em">
<p>Here is a nice background from St Pancras Station with the Olympic Rings in the background</p>
<hr />
<table style=" width: auto; color: #000; border-collapse: collapse;">
<tr>
<td style="border: 1px solid #fff; border-bottom-color: #000; background: #fff; text-align: left; vertical-align: top;">
<caption style=" font-style: italic; text-align: left; color: #000;">Files attached to this message</caption>
</td>
</tr>
<tr>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th>
<th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 75%;background: #FFF;">6315755363_7fbe95fc66_o.jpg</td>
<td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 25%;background: #FFF;">5 MB</td>
</tr>
</table>
<p>Please click here to download the attachments.</p>
<p>The attachments are available until: <b>Tuesday, 11 December.</b></p>
<hr />
</div>
</body>
</html>