It seems like Chrome/Firefox do not render borders on tr, but it renders the border if the selector is table tr td.
How can I set a border on a tr ?
My attempt, which doesn't work:
table tr {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td>
Text
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/edi9999/VzPN2/
This is a similar question: Set border to table tr, works in everything except IE 6 & 7 , but it seems to work everywhere except for IE.
Add this to the stylesheet:
table {
border-collapse: collapse;
}
JSFiddle.
The reason why it behaves this way is actually described pretty well in the specification:
There are two distinct models for setting borders on table cells in
CSS. One is most suitable for so-called separated borders around
individual cells, the other is suitable for borders that are
continuous from one end of the table to the other.
... and later, for collapse setting:
In the collapsing border model, it is possible to specify borders that
surround all or part of a cell, row, row group, column, and column
group.
It is possible to emulate border in table border collapse separate mode with css box-shadow :
table tr {
box-shadow: 0 0 4px #ccc;
}
Besides what top answer says, you should also make sure your border has visible style, for example:
border-style: solid;
if you are adding custom styles to some website.
Related
I'm using vBulletin to style a forum which primarily uses tables to style the site. How would I go about using padding on a tbody to space the content away from the border?
Here you can see a picture of my main site where the content is pushed 5px away from the border:
Whereas on vBulletin, adding padding on tbody doesn't push the content away:
Method 1
You have a couple different options:
tbody:before {
content: '';
display: block;
height: 20px;
}
Adding this basically "inserts" content before the end. It's sort of a "quick-n-dirty" fix.
Method 2
Another option is giving your table a border-collapse: collapse and then giving your tbody a border value:
table {
border-collapse: collapse;
}
table tbody {
border-right: 20px solid transparent;
}
Both of these methods have drawbacks, however. The before selector might not work in IE7, and requires a !DOCTYPE to work in IE8. The second method can sometimes be a bit touchy, depending on the rest of your css. Be sure to have a !DOCTYPE
Add an empty col and/or row with padded cells.
Adding :before content to tbody may not have the effect you're looking for. It may not push borders around as you think or even other cells or col or row groups. In general do not try to put anything outside a cell in a table, you're asking for trouble.
My last question was closed before I could get a full answer, so I'll phase this one a bit differently.
In Chrome, it appears that if you set a border-bottom on one table cell you have to set a border-bottom on all the cells in the same row, otherwise Chrome doesn't know what to do with the unaccounted space.
It was suggested that I simply use a white border to make it appear as though the other cells do not have a border. But what if I have a gradient background, and don't want a white line to appear?
It appears that 1px solid transparent does not have any affect. rgba doesn't work either.
According to MDN it all boils down to the border-collapse property:
The separated model is the traditional HTML table border model.
Adjacent cells each have their own distinct borders. The distance
between them given by the border-spacing property.
In the collapsed border model, adjacent table cells share borders. In
that model, the border-style value of inset behaves like groove, and
outset behaves like ridge.
Change border-collapse to separate and it works fine: jsFiddle example
I believe that this is either a bug or a different interpretation of the border-collapse property in Chrome. It seems to work fine (as intended) if you remove border-collapse: collapse from <table>: http://jsfiddle.net/YZBXn/6/
An alternative would be to use another element contained in the table cell that has the border.
<td><div style="border-bottom:1px solid black;width:1.5in;"> </div></td>
http://jsfiddle.net/YZBXn/7/
The problem is that 1px solid transparent is transparent to the 'border' underneath that is stretched from the previous sibling <td>. A better way would be to not use a table.
I was able to get it to work without resorting to transparent.
<table>
<tr><td id=cell1>bleah</td><td id=cell2>bleah</td></tr>
<tr><td id=cell3>blah</td><td id=cell4>blah</td></tr>
</table>
#cell1 {
border-bottom: 1px solid black;
}
#cell4 {
border-bottom: 9px dotted red;
}
Im having a weird issue on a table... I've set the border to be 0 in the css, i've set the border-color to be transparent, however, in the browser, it still shows a border on the top and on the left, which doesnt make any sense...
The table looks like <table cellspacing="0" style="border-width:0px;border-collapse:collapse;" id="gvTransactions" pagersettings="" rules="all" class="transaction-posts">
And the css looks like:
table.transaction-posts, table#gvTransactions {
border: 0 none transparent !important;
border-radius: 0 0 0 0;
}
As you can see, it still outputs a black border on the top, left and in every row, even though i've set the border to be 0...
In the table tag...add border="0"...if that doesn't work then check if any of the css is over-riding it, also post your code in jsfiddle.
The HTML attribute rules="all" in the table tag causes borders to be drawn on all sides of all cells. The HTML 4.01 spec says this somewhat vaguely, but this is how browsers interpret it. So if you don’t want any borders, remove that attribute.
If you want to have some of the borders but not all, you need to set them suitably. For example, if the border on the very top and on the very left is the problem (this is one interpretation of the question asked), then set
table#gvTransactions tr:first-child th, table#gvTransactions tr:first-child td {
border-top: none;
}
table#gvTransactions th:first-child, table#gvTransactions td:first-child {
border-left: none;
}
The first rule removes the top border of any cell in the first row. The second one removes the left border of any cell that is the first child of its parent, i.e. of the cells in the first column.
I have tried everything I can think of in css in order to get a background color to span an entire table row (<tr> tag) But I keep getting a white border around each cell.
CSS (excerpt):
/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;}
HTML (excerpt):
<tr class="rowhighlight"><td>A</td><td>B</td><td>C</td></tr>
It just does not want to cooperate. Thanks for helping...
table{border-collapse:collapse;}
I prefer to use border-spacing as it allows more flexibility. For instance, you could do
table {
border-spacing: 0 2px;
}
Which would only collapse the vertical borders and leave the horizontal ones in tact, which is what it sounds like the OP was actually looking for.
Note that border-spacing: 0 is not the same as border-collapse: collapse. You will need to use the latter if you want to add your own border to a tr as seen here.
Try this:
.rowhighlight > td { background: green;}
Removing the borders should make the background color paint without any gaps between the cells. If you look carefully at this jsFiddle, you should see that the light blue color stretches across the row with no white gaps.
If all else fails, try this:
table { border-collapse: collapse; }
tr.rowhighlight td, tr.rowhighlight th{
background-color:#f0f8ff;
}
Firefox and Chrome are different
Chrome ignores the TR's background-color
Example: http://jsfiddle.net/T4NK3R/9SE4p/
<tr style="background-color:#F00">
<td style="background-color:#FFF; border-radius:20px">
</tr>
In FF the TD gets red corners, in Chrome not
Have you tried setting the spacing to zero?
/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;spacing:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;spacing:0;}
This worked for me, even within a div:
div.cntrblk tr:hover td {
line-height: 150%;
background-color: rgb(255,0,0);
font-weight: bold;
font-size: 150%;
border: 0;
}
It selected the entire row, but I'd like it to not do the header, haven't looked at that yet. It also partially fixed the fonts that wouldn't scale-up with the hover??? Apparently you to have apply settings to the cell not the row, but select all the component cells with the tr:hover. On to tracking down the in-consistent font scaling problem. Sweet that CSS will do this.
I want to set the border of <tr> to yellow. I can set the border of <td> but can't figure how to set border of row <tr>.
How to do this?
Thanks.
This example is working fine on IE8, Chrome 9 and Firefox 3.6 so I really can't see what is the problem.
HTML used in the example:
<table>
<tr>
<td>AAA</td>
<td class="middle">BBB</td>
<td>CCC</td>
</tr>
</table>
CSS:
.middle { border: 2px solid blue; }
tr { border: 2px solid red; }
Result:
No can do, ime, even though css spec ( http://www.w3.org/TR/CSS2/box.html#border-properties ) plainly says border and border-color can be applied to "all elements". Though it might be because <table> might not fall under the box model; I'm not sure about this.
In any case, it's a counter-intuitive, crazy-seeming, page-bloat-inducing pita.
There must be better solutions than bordering every single table cell, which is what I end up doing.
-- pete
It does work, and by the spec.
The problem is that the borders collapse, and you did not expect that.
And by the spec the border for td tends to dominate over the border for tr:
http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution
Write a CSS rule for the tr element? Something like tr {border: ...} Have you tried this and it's not working? Validate your HTML code first with the W3C markup validator and solve the errors if there are any indicated.
I did it without css.
<TR BORDERCOLOR="RED" BGCOLOR ="PINK">output
works in IE but not firefox,chrome or even edge.