I have a Wordpress Template installed so the table takes the style that was given. I managed to change tables color for background and text but I couldn't remove the frame around the table (border). I found a lot of related results but I couldn't find something that worked for me (I'm not that much experienced with CSS).
body {
background: #040404;
}
table.photos_table td {
background-color: #040404 !important;
color: white !important;
}
table.photos_table {
border: none !important;
border-collapse: collapse !important;
}
<table class="photos_table">
<tbody>
<tr>
<td>food</td>
<td>drink</td>
</tr>
<tr>
<td>pizza</td>
<td>soda</td>
</tr>
</tbody>
</table>
This is what I get as a result.
Any suggestions what could be wrong? Do I need an other option?
The border is in the <tbody>, so giving:
table thead, table tbody, table tfoot {border: none;}
Works...
Check for border attribute in style.css file.
I am assuming border has been assigned to either td or tr attribute in style.css file.
This should fix it.
Related
I know this is an oft asked question, but I've tried some of the solutions (such as How to make separating lines/borders in a table disappear with CSS?) but I still can't quite get it.
I have defined via css a table structure with alternating row colors. I'd like the (in particular vertical) borders between teh cells to be invisible and so suppose I either need a zero td border width, or the alternating td border colors to be the same as the background colors.
Example below is what I've tried, in calling a table1 id from html, I get a nice alternating colored row table but with obvious cell borders still - appreciate your help.
#table1 table, tr, td, th {
border: 0;
}
#table1 tbody tr:nth-child(odd) {
background-color: #A3B9D2;
}
#table1 tbody tr:nth-child(even) {
background-color: #E7EDF3;
}
and then sample html;
<table id="table1" >
<tr>
<td>Test</td><td>(value)</td>
</tr>
<tr>
<td>Test2</td><td>(value2)</td>
</tr>
</table>
It's possible that what you're describing is cellspacing. If that's the case try this in your HTML:
<table cellpadding="0" cellspacing="0" border="0">
...
</table>
Cellspacing refers to the space between cells; it's not a border exactly. So, if you're seeing invisible or non-colored spaces between your tds, try adding the cellspacing="0" attribute to your table tag.
You can also use this style:
#table1 {border:0px solid transparent;}
Try this
#table1 {
border-collapse: collapse;
}
Using cellspacing="0" is indeed a sure-fire way to get rid of those pesky lines. But, personally, I've never liked it - because I have to apply it in each and every table that I create throughout a site, instead of in one neat, centralized spot.
So, I usually go for a solution like elclanrs's in a CSS file. The cool thing about that solution is that you can remove some of the tags ahead of it to apply lines/borders for just those.
So, in other words, to put a border around a table - without having all of the cells divvied up between lines too - you can do something like this:
tr, td, th
{
border: 0;
}
Good luck!
#table1 table, tr, td, th {} is wrong.
You should do:
#table1,
#table1 tr,
#table1 td { border: 0; }
It seems that you are applying the style to tables within table1. The first declaration should actually be:
#table1 {
border: 0;
}
or
table #table1 {
border: 0;
}
What browser are you using? For complete backwards compatibility you still need the cellspacing="0" attribute set on the table.
http://jsfiddle.net/RmhxH/
Try this:
table,td,tr,th{
border:0;
}
I need help in this:
if i try to integrate this on a newsletter mailchimp the lines goes down here is the screenshot:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic4.png
can someone help me why is this happening?
if I test this in a textpad it looks good, and if I try to put the code now in mailchimp, it the lines are reformatted. any idea?
thanks
Add
border-top: 1px solid #000;
To the style attribute for the <td> tags.
You can change the color to anything you want obviously and you may want to look into using external CSS stylesheets.
Something like:
td { border-top:2px solid #fb0 }
td { padding-left:25px; padding-bottom:10px; padding-top:10px; width: 30% }
tr.alt { background: #ffc }
the row to have the background will use
<tr class="alt">
it is also common practice to put all the style in a css file or in the separate <style> tag region.
sample: http://jsfiddle.net/2LXUn/2/
If you want a table, with only border at the top, the following will work.
<table style="border-color:#008000;border-style: solid none none none;border-width:2px; width: 100%">
<tr> <td > row1</td>
</tr> <tr >
<td>row2</td> </tr>
</table>
You may also apply the border style to table rows as required.
I have a table with multiple tbody's, each of which has a classed row, and I want it so that the classed row in the first tbody has style differences, but am unable to get tbody:first-child to work in any browser. Perhaps I am missing something, or maybe there is a workaround.
Ideally, I would like to provide the programmers with a single tbody section they can use as a template, but will otherwise have to add a class to the first tbody, making for an extra test in the programming.
The html is straightforward:
<tbody class="subGroup">
<tr class="subGroupHeader">
<th colspan="8">All Grades: Special Education</th>
<td class="grid" colspan="2"><!-- contains AMO line --></td>
<td><!-- right 100 --></td>
</tr>
<tr>...</tr> <!-- several more rows of data -->
</tbody>
There are several tbody's per table. I want to style the th and td's within tr.subGroupHeader in the very first tbody differently than the rest. Just to illustrate, I want to add a border-top to the tr.subGroupHeader cells.
The tr.subGroupHeader will be styled with a border-top, such as:
table.databargraph.continued tr.subGroupHeader th, table.databargraph.continued tr.subGroupHeader td {
border-top: 6px solid red;
}
For the first tbody, I am trying:
table.databargraph.continued tbody:first-child tr.subGroupHeader th {
border-top: 6px solid blue ;
}
However, this doesn't seem to work in any browser (I've tested in Safari, Opera, Firefox, and PrinceXML, all on my Mac)
Curiously, the usually excellent Xyle Scope tool indicates that the blue border should be taking precedence, though it obviously is not. See the screenshot at http://s3.amazonaws.com/ember/kUD8DHrz06xowTBK3qpB2biPJrLWTZCP_o.png
This screenshot shows (top left) the American Indian th is selected, and (bottom right), shows (via black instead of gray text for the css declaration), that, indeed, the blue border should be given precedence. Yet the border is red.
I may be missing something fundamental, like pseudo-classes not working for tbodys at all... This really only needs to work in PrinceXML, and maybe Safari so I can see what I'm doing with webkit-based css tools.
Note I did try a selector like tr.subGroupHeader:first-child, but such tr's apparently consider the tbody the parent (as I would suspect), thus made every border blue.
Thanks...
Sorry folks, but I'm gonna answer my own question. But I do appreciate the help.
Instead of:
table.databargraph.continued tbody:first-child tr.subGroupHeader th {
border-top: 6px solid blue ;
}
What I should have done was:
table.databargraph.continued > tbody:first-of-type tr.subGroupHeader th {
border-top: 2px solid blue !important ;
}
Is the tbody really the first child of the table? If there is any other element that is an earlier sibling (e.g. a thead?) than this will not work.
I've tried the following test code and it seems to work:
<html>
<head>
<style type="text/css">
table tbody tr th {
border-top: 6px solid red;
}
table tbody:first-child tr th {
border-top: 6px solid blue;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><th colspan="2">Title</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
<tbody>
<tr><th colspan="2">Title</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
<tbody>
<tr><th colspan="2">Title</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
When adding a thead element, this stops working, because there is no tbody that is the first child of the table. What does seem to work in that case (at least in Opera) is the following:
table thead + tbody tr th {
border-top: 6px solid blue;
}
This selects all tbody that directly follow a thead.
I have a peculiar and frustrating problem. For the simple markup:
<table>
<thead>
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
I apply different background-color values to the thead, tr, and tr odd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell.
I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors.
You need to add this to your CSS:
table { border-collapse:collapse }
to remove the border , juste using css like this :
td {
border-style : hidden!important;
}
Modify your HTML like this:
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr><td>1</td><td>2</td><td>3</td></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
(I added border="0" cellpadding="0" cellspacing="0")
In CSS, you could do the following:
table {
border-collapse: collapse;
}
Set the cellspacing attribute of the table to 0.
You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.
You may also want to add
table td { border:0; }
the above is equivalent to setting cellpadding="0"
it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles
After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):
.comment-content table {
border-bottom: 1px solid #ddd;
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}
Thus looking like this afterwards:
.comment-content table {
border-bottom: 0;
.comment-content td {
border-top: 0;
padding: 6px 10px 6px 0;
}
Try assigning the style of border: 0px; border-collapse: collapse; to the table element.
sometimes even after clearing borders.
the reason is that you have images inside the td, giving the images display:block solves it.
I have a simple html table like this: http://jsbin.com/oxiyi
I want to have a border with color #990000 outside the entire table. So I have made a table outside the table and given it border color of #990000. But still I dont see a border color.
Use the border property with CSS style and give it the color. I got rid of the nested tables in your example as well.
<style>
td {
border: solid 2px lightgrey;
}
</style>
<table style="border: 5px solid #990000; border-collapse: collapse">
http://jsbin.com/odici
That preserves your borders on your cells...
Tables inside tables! Oh noes! My head hurts.
You should be glad that doesn't work, as it is awful markup and should be avoided at all costs. Looking at your HTML code I am noticing a lot of inline properties being set and lack of CSS being used. You should really read up on CSS, as the code you have right now looks more like the code that was being produced in 2000 rather than what we're doing nowadays. In short, however, you can get rid of your outer table and add a style declaration of border: 1px solid #990000; in the table to get the effect you want. This is just the tip of the iceberg, however, and you really should read up on CSS and valid markup before your website self implodes. :)
Probably because the outer table has border set to 0
Change border =0 to border=1
A better method would be to remove the outer table and add the border via CSS:
<table ... style='border: 1px solid #900'>
Better still, use an external stylesheet to style the table.
Several problems:
A <div> would be a better tool for
this job
Your outer table has bgcolor
specified, not bordercolor
Your outer table has border set to
0
You need to also include a <tr>
and <td> around the inner table to
make your HTML correct
Like this:
<table name='outerTable'>
<tr>
<td>
<table name='innerTable'>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
You need to add two styles to the code:
Added "border-collapse: collapse" style to table tag
Added "border: 1px solid gray" style to all td tags
table {
border-collapse: collapse;
}
table tr td {
border: 1px solid gray;
}
border-collapse: collapse
}
Try using the following code
tr .bordered{
border-bottom:1px solid #000;
}
the while calling it use
<tr class="bordered"></tr>
I can't tell you exactly why your tables are not interacting correctly without seeing your markup, but I do see a problem with your fundamental approach.
Instead of another table, wrap your table in a DIV tag like this:
<div style="border:solid 1px #990000;">
<your table>
</div>
This better adheres to modern standards for HTML/XHTML.
Without seeing your code, I can't tell you whether your inner table adheres to best practices or not.
Hope this helps
Create one custom css file in '/css ' dir, say 'local.css'
Add following code in marinelli.info file.
stylesheets[all][] = css/local.css
Try adding following css code in your custom css (i.e. local.css) file :
tbody {
border-top: 1px solid #CCC;
}
tr, tr.even {
background: #dedede;
}
table tr th {
background: #757575;
}
tr td, tr th {
border: 1px solid white;
}
table tr th, table tr th a, table tr th a:hover {
color: white;
}
Please clear cached data here- /admin/config/development/performance
Rgrds,