I am new to CSS and have a small problem.I am creating a news feed page and want to separate each feed from the other.see the image i have attached to see what i exactly want.
heres what i have tried so far...
<html>
<style type = text/css>
td.border
{
border-right-style: hidden;
border-left-style: hidden;
border-top-style: hidden;
border-bottom-color: #999;
}
</style>
<table width="90%" align="center" cellpadding="4" bgcolor="#A6D2FF">
<tr>
<td width="7%" bgcolor="#FFFFFF">Name<br />
</td>
<td width="93%" class = "border" bgcolor="#D9ECFF"> <span style="font-size:10px; font-weight:bold; color:#A6A6A6;">Date</span><br />
ufeed</td>
</tr>
</table>
</html>
You should try use border-top/left/right/bottom instead of *-style and *-color:
td.border
{
border-right: none;
border-left: none;
border-top: none;
border-bottom: 1px #999 solid;
}
And as mentioned above - you shouldn't use table for things like that.
Related
I am trying to format the table to have rows separated by lines.Even tried using inline styles but nothing worked. Am I missing anything here?
Expected output :
Output I am getting :
Here is the perl code that I am using to generate the HTML for the email :
my $section_html = '';
$section_html.=qq(<table><tr style="border : 1px solid black;"><td>Hello1</td><td>Hello2</td></tr><tr style="border : 1px solid black;"><td>Hello3</td><td>Hello4</td></tr></table>);
my $email_html = <<EOF;
<html><head><style type="text/css">
body, td, th, strong { font-family: Verdana; font-size: 11px; }
table {
border:none;
border-collapse: collapse;
text-align:center;
}
table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table th {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table td:first-child {
border-left: none;
text-align:left;
}
table td:last-child {
border-right: none;
}
table tr{
border-top : 1px solid #000;
}
table tr{
border-top : 1px solid black;
}
</style></head>
<body bgcolor="#ffffff">
<span style="font-size: 20px">Report Header</span>$section_html</body></html>
EOF
# Write to file
open(FILE, ">/var/weekly_report/"."report"."_"."testing".".html") or die "Unable to open file for writing: $!\n";
print FILE $email_html;
close(FILE);
# Email weekly report
my $msg = MIME::Lite->new(
To => 'XXXX#somedomain.com',
Subject => 'Report subject',
Type => 'text/html',
Data => $email_html);
$msg->send();
This is going old school. Try this method as well. The difference from Ted's answer is, you have the whole table the same color and in his answer you can choose the border color for different td's or th's.
<table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="#000000">
<tbody>
<tr>
<td width="50%" bgcolor="#ffffff">Hello1</td>
<td width="50%" bgcolor="#ffffff">Hello1</td>
</tr>
<tr>
<td bgcolor="#ffffff">Hello1</td>
<td bgcolor="#ffffff">Hello1</td>
</tr>
</tbody>
</table>
Some email clients (and maybe browsers) don't allow us to directly style the <tr> tag. It's also safer to avoid relying on :first-child and :last-child pseudo selectors, as they are not well supported in email.
However you we can achieve your desired effect by styling the <table> and <td> tags:
table {
border-top: 1px solid #000;
border-right: 1px solid #000;
}
table td,
table th {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
You can also have absolute control by inlining all CSS, which is still a good idea in HTML email.
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
I was creating a table, but my issue is that table border is not working because it calls some other css.
Here is my FIDDLE
margin: 0;
padding: 0;
border: 0;
So how can i override the margin: 0;padding: 0; border: 0; , so that i can get the table border easily.
Any help is appreciated.
It's not about the margin nor padding, it's the border: 0 that hides the border.
Add a rule for the table tds such as:
td {
border: 1px solid black;
}
to show td borders. The same applies to table tag. You would also probably want to take a look at the border-collapse property for table tag (https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse).
Demo: http://jsfiddle.net/2DQ6U/10/
Furthermore, I suggest you to avoid any inline style definition if not strictly necessary.
Remove border:0 from CSS.
Take a look here:
DEMO
It is better you can use class for the table and apply it through CSS.
HTML
<table class="testclass">
<tbody>
<tr>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>ID Number</strong></span></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>Room Name</strong></span></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>Name of Company</strong></span></span></td>
</tr>
<tr>
<td>
<span style="color:#000000;"><strong><span style="font-family:verdana,geneva,sans-serif;">1</span></strong></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;">Premier</span></span></td>
<td>
Amsh Ltd</td>
</tr>
</tbody>
</table>
CSS
table.testclass
{
border-top:1px solid #000;
border-left:1px solid #000;
border-collapse:collapse;
width:800px;
}
table.testclass td
{
border-right:1px solid #000;
border-bottom:1px solid #000;
padding:5px;
}
FIDDLE DEMO
the reason your border doesnt work is because you are using "border-collapse: collapse" on the tbody. You need to instead use it on table styling.
here is the CSS you need to use
table,td{
border: 1px solid black;
padding: 5px;
margin: 1px;
}
Here is the HTML change. Notice the "border-collapse:collapse" in the table but not tbody which was your problem.
<table border="10" cellpadding="10" cellspacing="10" style="width: 800px;border-collapse: collapse;">
<tbody style="border: 1px solid black; ">
Here is the fiddle
Hope that helps.
I would like to create a table that consists of several cells in several rows, and when the amount of cells does not fit 100% to the table's size, the main table's border will not show as an exact square, but rather wrap itself around the content.
For example:
<table border = "2px">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
This is the current situation:
This is what I am aiming for:
You can achieve this by including the redundant cells and hiding them with the CSS empty-cells property.
HTML
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
CSS
table td {empty-cells:hide;border:3px double;}
Note the table itself is not given a border, but rather the cells themselves directly. Unfortunately, this will not work in combination with a border-collapse:collapse; declaration.
See jsFiddle demo
Edit
If a second border is required, you can use the double value of the border-style property. Updated the CSS above and the fiddle to reflect this.
It is possible!
Through a heroic personal effort, I have reproduced your graphic using css only from your html.
http://codepen.io/anon/pen/Ekoxl
It works like this:
table {
display: block;
}
tr {
display: block;
float: left;
clear: left;
position: relative;
border-style: solid;
border-width: 3px;
background-color: white;
border-color: #999 #333 #333 #999;
}
tr:nth-child(n+2) {
border-width: 0 3px 3px 3px;
}
tr:nth-child(n+2)::before {
content: "";
display: block;
background-color: #fff;
position: absolute;
width: 100%;
top: -3px;
height:4px;
}
tr:nth-child(n+2)::after {
content: "";
display: block;
background-color: #999;
position: absolute;
width: 3px;
height: 4px;
top: -3px;
left: -3px;
}
td {
display: inline-block;
border: solid #666 1px;
margin: 2px
}
you cannot do that by table but can achieve it via div and css
still i have shown what td with little style can do
please check
<html>
<head>
<style>
td{border:2px solid black;}
</style>
</head>
<body>
<table border = "2px">
<tr><td>1</td><td>2</td></tr><tr><td>3</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="1">
<tr><td>1</td><td>2</td></tr><tr><td>3</td></tr>
</table>
</body>
</html>
I have an HTML table with the class "productsTable". I want to give each cell in the table a border. Now I have tried the following in my stylesheet but none of the two works. What am I doing wrong? Thank You
td.productsTable
{
border: 1px dotted #999999;
}
.productsTable td
{
border: 1px dotted #999999;
}
HTML:
<table class="productsTable" width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td class="ephoneFree tableHeader" width="20%" align="center">e-phone FREE</td>
<td class="personal tableHeader" width="20%" align="center">Personal</td>
<td class="PBX tableHeader" width="20%" align="center">Pro PBX</td>
</tr>
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>
td.productsTable won't work because you have no <td> elements with a productsTable class.
However, your second CSS rule, .productsTable td, this will work because you do have <td> elements that have a parent element with the class productsTable.
I've made a quick fiddle of this, and you can see it working correctly:
td {
border: 1px dotted #999;
}
<table width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td width="20%" align="center">e-phone FREE</td>
<td width="20%" align="center">Personal</td>
<td width="20%" align="center">Pro PBX</td>
</tr>
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>
If this isn't working for you, its likely that you have either not correctly linked your CSS file, or there is another CSS rule overriding this. Try inspecting element to see.
I want to give each cell in the table a border.
What I've understand is you want cell border like this:
Here is the fiddle of what you want.
Use following CSS:
table.productsTable {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: white;
}
table.productsTable td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
Hope this helps.
write like this:
.products td
{
border: 1px dotted #999999;
}
HTML
<table class="products">
<tr>
<td></td>
</tr>
</table>
Below code does the following:-
1. gives single border to td's
2. separate border to the table.
Environment:-
Works on FF 34.0.
Untried for html6:-
To run it using html6, try it with html:x eg. html:head, html:title, etc.
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<title>Welcome to the jungle</title>
<style>
.table_main {
border-top-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
border-right-style: ridge;
border-color: red;
border-width: 3px;
}
.table_main td {
background: #A38055;
border-right: solid 1px white ;
border-bottom: 1px solid white;
text-align: center;
}
.table_main th {
background: #DCDCDC;
border-right: solid 1px white ;
border-bottom: 1px solid white;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to the jungle</h1>
<table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
<thead> <th>THead1</th> <th>THead2</th> <th>THead3</th>
</thead>
<tbody>
<tr> <td>A</td> <td>B</td> <td>C</td> </tr>
<tr> <td>X</td> <td>Y</td> <td>Z</td> </tr>
<tr> <td>Xena</td> <td>Yoda</td> <td>Zohan</td> </tr>
</tbody>
</table>
</body>
</html>