This question already has answers here:
Giving a border to an HTML table row, <tr>
(10 answers)
Closed 2 years ago.
Any thoughts as to why this isn't working?
<tr style="border-style: solid; border-width: 0px 0px 3px 0px; border-color: #97298f;">
Thanks!
EDIT:
This is more detail from this section, applying to cells since it wasn't working for the row, using the suggestions below – but it's still not working:
<tr>
<td style="border: 0px 0px 3px 0px solid #97298f" width="75%" colspan="3"><p><i><span style="font-size:42pt;font-family:"Fira Sans Medium",sans-serif; color:#7030A0">Joining Together</span></i></p></td>
<td style="border: 0px 0px 3px 0px solid #97298f" width="25%"><p align="right" style="text-align:right"><span style="font-family:"Fira Sans Light",sans-serif;"><img width=112 height=62 src="https://drive.google.com/uc?export=view&id=1ZVLVDqtRqX691OXo7dN2n1Pb2V1D42Lq&authuser=camfont%40gmail.com&usp=drive_fs"
alt="Unity Logo" v:shapes="Picture_x0020_4"></span></p></td>
</tr>
The properties of the border attribute are in the following order:
border-width, border-style and then the color.
Take a look at this example
<tr style="border: 1px solid red;">
You can open this site to know more abbout styling tables.
Related
I want to remove horizontal lines from my HTML table
I have tried using CSS like border-bottom and border-top and set the value to 0 but that didn't change; whereas border-right and border-left working perfectly.
tr {
border-bottom: 0;
/* border-bottom:none; */
}
<table style="border:1px solid black;">
<tr>
<td style="padding:0px 15px 0px 65px;"><strong>Type</strong></td>
<td style="padding:0px 15px 0px 20px; "><strong>Quantitiy</strong></td>
<td style="padding:0px 15px 0px 0px;"><strong>price</strong></td>
<td style="padding:0px 15px 0px 0px;"><strong>total price</strong></td>
</tr>
<tr class="type">
<td style="padding:5px 15px 0px 65px;">{{type}}</td>
<td style="padding:5px 15px 0px 20px;">{{meters}}</td>
<td style="padding:5px 15px 0px 0px;">{{price}}</td>
<td style="padding:5px 15px 0px opx;">{{price_total}}</td>
</tr>
</table>
I want to remove those horizontal lines using CSS like border-bottom but failed.
i have just added psuedo code
this is how actually my table looks like
i want to remove those horiazontal line from cloth,shirt,pants straight away to the bottom for all the columns as well
table, th, td {
border-collapse: collapse;
}
td{
border:1px solid black;
border-top: none;
border-bottom: none;
}
This should do the work
Try to add style to td element. Not to tr.
My question is how to create a box on extreme side of the page in ckeditor
This is the code what is used but unable to generate the same in word.
<table border="4" cellpadding="1" cellspacing="1" style="height:5in; margin-left:5in; margin-right:5in; margin-top:-0.7in; width:100px">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
Alternately,i used div property but i couldn't get what i wanted
<div style="border-bottom: #000 1px solid; text-align: center; border-left: #000 1px solid; height: 36px; margin-left: 50px; border-top: #000 1px solid; margin-right: 50px; border-right: #000 1px solid">AGREEMENT FOR HYPOTHECATION-AGRICULTURAL ADVANCES</div>
Can anyone help me out like what is the exact thing to be done to position a box on left side of page and simultaneously can alter the text box size?
Thanks in Advance
My HTML email format is not functioning properly in outlook. The code is using angular and bootstrap css. I have used inline css specially for outlook but when i see the email in outlook table is stretched in full screen.
I have seen some question and used the implementation suggested in answers but still showing this problem. my code is as follow:
<table class="table table-striped table-bordered table-condensed" width="320" style="margin-bottom: 20px;border: 1px solid #ddd; border-collapse: collapse">
<tr ng-repeat="x in xall | orderBy:'name':false" style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px;">
<th style="text-align: left; padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:40%;">Site Revenue</th>
<td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="!data.isPrev">£850</td>
<td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="data.isPrev">£500</td>
</tr>
<tr ng-repeat="x in xall | orderBy:'name':false" style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px;">
<th style="text-align: left; padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:40%;">Product Revenue</th>
<td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="!data.isPrev">£650</td>
<td style="padding: 5px; border: 1px solid #ddd; border-bottom-width: 2px; width:30%;" class="number" ng-if="data.isPrev">£570</td>
</tr>
</table>
Please put some suggestions as I am totally stuck with this issue as width attribute is not functioning with outlook.
I had the same problems.
Here are some hints:
when you give padding attribute, it should go like this: padding:5px 5px 5px 5px;
floating (float) CSS attribute is not working in outlook.
when you give background color which need to be given as ( bgcolor ) in table attribute.
Write all CSS attributes inline
The fact is that Outlook uses Word for rendering your HTML. Word is used as an email editor. Read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following series of articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Hope you will find that information helpful...
I'm working on a mobile site targeting older phones that have limited CSS \ html support and so I'm reverting to tables.
What I'm trying to achieve on a particular page is to have a table row with a heading of a particular value and then another row in the same table with the value and a link to edit
The problem is that the heading spans only one column and I would like to be able to style it so that there is some padding and margins as well as a border.
Can someone provide some advice on how to do this?
HTML
<div class="navalt">
<table style="width:100%;">
<tbody>
<tr class="edHeading">
<td><fmt:message key="editprofile.location"/></fmt:message></td>
</tr>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
CSS
.navalt {
text-align:center;
padding: 4px 0px 4px 4px;
border-top: thin solid #C5C9D1;
border- bottom: thin solid #C5C9D1;
}
.edHeading {
padding: 4px 0px 4px 4px;
background-color:#E9E1FF;
}
.leftTd {
border-right: thin solid #C5C9D1;
padding: 0px 0px 0px 5px;
text-align:left;
width:50%;
}
.rightTd {
padding: 0px 5px 0px 0px;
text-align:right;
width:50%;
}
As Wabs said, you could just add a colspan to your td in the heading.
Another way, which will allow you to separate your styling more, is to use the thead tag - seeing as you have used <tbody> this would make more sense.
Also - as a side note, you have no closing tags for your div and body and table - though i assume this is because you only copied part of your code..?
Here is a fiddle: http://jsfiddle.net/f6NKt/2/
the code is as:
HTML
<table style="width:100%;">
<thead>
<tr>
<th colspan="2">Heading - location use th tags</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
</tbody>
</table>
and CSS - notice use of thead instead
.navalt {text-align:center;padding: 4px 0px 4px 4px;border-top: thin solid #C5C9D1;border- bottom: thin solid #C5C9D1;}
thead {padding: 4px 0px 4px 4px;background-color:#E9E1FF;}
thead th {font-size:20px;}
.leftTd {border-right: thin solid #C5C9D1;padding: 0px 0px 0px 5px;text-align:left;width:50%;}
.rightTd {padding: 0px 5px 0px 0px;text-align:right;width:50%;}
Unless I'm missing something, could you not add colspan=2 to the header <td> so it spans your entire table?
<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>
I have a problem with e-mail clients reverting my styled <hr/> to one with just a solid line.
The following is my mark-up, looks fine in Chrome and IE but Outlook always reverts the dotted line to a solid one.
<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>
I have looked at Campaign Monitor but nothing particular to guide me there.
All answers appreciated.
I would imagine it's because outlook uses the Microsoft word rendering engine, rather than a HTML engine, and a hr tag would just get reverted to a solid line as in msword.
I'd probably try using a full width table->cell or div and style that instead of using an hr tag.
<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;"> </td>
</tr>
</table>
nbsp is in there in case the rendering engine doesn't recognise empty cells.
Based on the other answers, I found this to work best:
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;"> </td>
</tr>
</table>
<br>
The width seems to be needed on table in % or preferrably (as per https://www.campaignmonitor.com/resources/will-it-work/guidelines/) set it in px on the td if possible.
The border-bottom shorthand seems to work fine, where the longhand versions as mentioned in kolin's answer don't in Outlook.
EDIT: What I found to have used previously and also works, at least in Outlook (would be nice if anyone who can, could test that in other clients), is a <hr>based approach.
<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
Rather inelegant and only useful for a known fixed width but I'm finding that these are the terrors visited upon you when trying to fix formatting in html emails'.
<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
You can use this example:
<div style="border-top: 1px dotted #999999;"> </div>
It will only work against white background unfortunately
Need to declare a font-size, otherwise " " messes with the height.
<tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px"> </td></tr>