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,
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;
}
Why does this work?
<table border=1>
And this doesn't?
<table style="border-width:1px;border-color:black">
I get the same result in Chrome and in IE9.
Doing borders on tables with css is a bit more complicated (but not as much, see this jsfiddle as example):
table {
border-collapse: collapse;
border: 1px solid black;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
The default border-style is none, so you must specify that as well as the width and the colour.
You can use the border shorthand property to set all three values in one go.
Also, the border attribute describes the border for the table and the cells. CSS is much more flexible so it only describes the border of the elements you are selecting. You need to select the cells too in order to get the same effect.
table, th, td {
border: solid black 1px;
}
See also border properties and tables in CSS.
The reason it didn't work is that despite setting the border-width and the border-color you didn't specify the border-style:
<table style="border-width:1px;border-color:black;border-style:solid;">
JS Fiddle demo.
It's usually better to define the styles in the stylesheet (so that all elements are styled without having to find, and change, every element's style attribute):
table {
border-color: #000;
border-width: 1px;
border-style: solid;
/* or, of course,
border: 1px solid #000;
*/
}
JS Fiddle demo (Or using shorthand border notation).
<table style='border:1px solid black'>
<tr>
<td>Derp</td>
</tr>
</table>
This should work. I use the shorthand syntax for borders.
You need to add border-style like this:
<table style="border:1px solid black">
or like this:
<table style="border-width:1px;border-color:black;border-style:solid;">
Like this:
border: 1px solid black;
Why it didn't work? because:
Always declare the border-style (solid in my example) property before the border-width
property. An element must have borders before you can change the
color.
<table style="border: 5px solid black">
This only adds a border around the table.
If you want same border through CSS then add this rule:
table tr td { border: 5px solid black; }
and one thing for HTML table to avoid spaces
<table cellspacing="0" cellpadding="0">
Is there a possibility to have a visual separator between two lines (tr) in an HTML table.
I tried with a <br> but this is not valid code.
I tried do add a padding-top to the tr after the break but it does not work.
Currently I use an empty line:
<tr><td colspan=\"X\"> </td></tr>
but I don't think this is the best solution, especially as I have to make sure the colspan is adjusted if there is a change is the number of columns.
Is there any way to solve this?
Edited to reflect my re-reading the question rather than the title of the question (original answer remains below the rule).
If you want a visual separator (rather than simply white-space) then simply use:
td {
border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */
}
The only way to increase spacing between table rows, that I'm currently aware of, is to use padding on individual rows/cells:
td {
padding: 0.5em 1em;
border: 1px solid #ccc;
}
JS Fiddle demo
Although there is the potential to use transparent (or background-color-ed borders):
table {
border-collapse: separate;
}
td {
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
}
td:hover {
border-color: #ccc;
}
JS Fiddle demo
The <tr /> element is not stylable in all browsers however you could always add the padding or a bottom-border to the cells within the tr.
Actually, I use separate trs for this purpose all the time. I style them (e.g. the one td within) via a separator class.
About the colspan-problem see Colspan all columns.
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.