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.
Related
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.
This one will show border for Chrome, FF, IE 8 and 9, but it won't show a border for IE 7.
http://jsfiddle.net/y7HWr/10/
(which is to have a border for <tr>). So I think probably IE 7 is at fault? Even though I don't see books talking about borders for <tr> elements (they talk about for <tr> elements usually), but really it should apply to most any elements? (maybe except elements that doesn't make sense to have borders, such as <meta> or <script> or <style>... otherwise most other elements should be able to have a border?
Instead of marking each <td> to be the class .end-of-category, I change it this way so that it works with IE 7... any alternatives or other ideas?
tr.end-of-category td { border: 6px solid #000 }
table { border-collapse: collapse }
table .end-of-category td { border-bottom: 6px solid #000 }
The above should work, or at least achieve the same if you've only got one border involved - I think it's how the different browser handle border-collapsing, but then again maybe it's just IE
Update: yes, it's IE7
using the separate border model (default) means no-one renders the border on the tr
table { }
table .end-of-category { border-bottom: 6px solid #000 }
So it seems like, IE7 had a difference of opinion again LOL!
Using the collapsed table borders it would be very unlikely an effect couldn't be achieved using the TD borders instead, but still!
.end-of-category td { border: 6px solid #000 }
Works in IE7 and IE6.
It's a classic problem - when you have an empty table cell the browser doesn't render borders around it. There are also two well-known workarounds. One is to place an in the table cell; the other is to use the empty-cells:show CSS property.
Unfortunately both have drawbacks. is kind of ugly when it comes to selecting text and copy-pasting it. You get a lot of spaces where there shouldn't be any, perhaps even with an exotic Unicode character. empty-cells:show should address exactly this problem, but unfortunately it only works properly in IE starting with version 8 (and then only in standards-compliant mode). It can be made to work in other versions by also specifying border-collapse: collapse, but sometimes this is what is NOT desired. In my case I have a fairly complex table and it relies on border-collapse:separate and would otherwise create quite a messy CSS/HTML soup.
So what are other things that you might put in a table cell that would make IE draw the borders yet not be visible or copyable? For all other browsers the empty-cells:show already does the trick, so I really just need to fool IE.
You can also put invisible br element:
<td><br style="visibility:hidden"></td>
It is ridiculous amount of unnecessary code, but it makes the trick - no additional text added yet cell is displayed.
Note that <br/> is invalid HTML syntax according to the official specifications http://www.w3.org/TR/html401/struct/text.html#edef-BR. It is valid XHTML syntax however.
You can show the cells with this CSS code. I successfully tested it in Safari and Firefox. I guess it works in other browsers as well.
table {
width: 100%;
border: 0;
empty-cells: show;
}
td {
border: 1px solid grey;
}
td:empty:after {
content: '.';
color: transparent;
visibility: hidden;
}
/* alternate background */
tr:nth-child(odd) td {
background: rgba(0, 0, 0, 0.2);
}
tr:nth-child(even) td {
background: rgba(0, 0, 0, 0.1);
}
<table>
<tr>
<td>Row</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Row</td>
<td>3</td>
</tr>
</table>
How can I prevent automatic line breaks in a column of table (not a single cell)?
You can use the CSS style white-space:
white-space: nowrap;
For completion sake:
#table_id td:nth-child(2) {white-space: nowrap;}
Is used for applying a style to the 2 column of the table_id table.
This is supported by all major Browsers, IE started supporting this from IE9 onwards.
Just add
style="white-space:nowrap;"
Example:
<table class="blueTable" style="white-space:nowrap;">
<tr>
<td>My name is good</td>
</tr>
</table>
Use the nowrap style:
<td style="white-space:nowrap;">...</td>
It's CSS!
There are a few ways to do this; none of them are the easy, obvious way.
Applying white-space:nowrap to a <col> won't work; only four CSS properties work on <col> elements - background-color, width, border, and visibility. IE7 and earlier used to support all properties, but that's because they used a strange table model. IE8 now matches everyone else.
So, how do you solve this?
Well, if you can ignore IE (including IE8), you can use the :nth-child() pseudoclass to select particular <td>s from each row. You'd use td:nth-child(2) { white-space:nowrap; }. (This works for this example, but would break if you had any rowspans or colspans involved.)
If you have to support IE, then you've got to go the long way around and apply a class to every <td> that you want to affect. It sucks, but them's the breaks.
In the long run, there are proposals to fix this lack in CSS, so that you can more easily apply styles to all the cells in a column. You'll be able to do something like td:nth-col(2) { white-space:nowrap; } and it would do what you want.
<td style="white-space: nowrap">
The nowrap attribute I believe is deprecated. The above is the preferred way.
<table class="blueTable">
<tr>
<td>My name is good</td>
</tr>
</table>
<style>
table.blueTable td,
table.blueTable th {
white-space: nowrap;
/* non-question related further styling */
border: 1px solid #AAAAAA;
padding: 3px 2px;
text-align: left;
}
</style>
This is an example usage of the white space property with value nowrap, the bluetable is the class of the table, below the table are the CSS styles.
Put non-breaking spaces in your text instead of normal spaces. On Ubuntu I do this with (Compose Key)-space-space.
To apply it to the entire table, you can place it within the table tag:
<table style="white-space:nowrap;">
For some reason, one of the inside borders disappears on my table whenever I change the default height with some CSS.
HTML:
<table class="event">
<tr>
<td>Start Date</td>
<td>2009-6-2</td>
</tr>
<tr>
<td>End Date</td>
<td>2009-6-8</td>
</tr>
<tr>
<td>Location</td>
<td>Vail</td>
</tr>
</table>
CSS:
table.event
{
border-collapse: collapse;
border: 1px solid #000;
width: 33%;
height: 300px;
}
table.event td
{
border: 1px solid #000;
padding: 2px;
}
Here's what it currently looks like
http://img410.imageshack.us/img410/394/whatv.png http://img410.imageshack.us/img410/394/whatv.png
Anybody have any ideas on how I can fix this problem?
If you take your code and put it directly in a blank html page, does it work? I am wondering if there is something outside causing it, perhapes in a different CSS (just guessing).
I pulled this open in FF, Safari, Opera, Chrome, IE6-7 and 8 and could not replicate it.
Even with/without out the border-collapse i get the same results.
Just solved the problem. Jeez, I feel like an idiot. The reason this was happening was because I was "zoomed out" a little bit in Firefox. The scaling got rid of one of the inside borders.
Thanks to all for the help, It was Jason Heine's idea that eventually lead to me figuring it out.
That code works fine for me in firefox and ie7. Are you changing the height with javascript or something else, or just within the editor? However, you could try getting rid of border-collapse.