I'm currently trying to use an HTML table with an HTML table, and I'm using the following CSS style for the outside table:
table.jobtable tr:nth-child(4n+1)
{
background-color: #65594D;
}
table.jobtable tr:nth-child(4n+3)
{
background-color: #3E362F;
}
I want to be able to make a table inside one of the rows without adopting it's background color. However, everything I seem to try results in the background color being adopted. Seems like such a trivial thing to be stuck on.
Any help appreciated.
Easy peasey:
table table {
background: none; /* Or whatever background you want */
}
You can use the > selector in css.
table.jobtable > tr:nth-child(4n+1)
{
background-color: #65594D;
}
This will only apply the style to tr elements that are direct children of table.jobtable, so it won't cascade down to the next table. [If you use a tbody tag, you'll need to do table.jobtable > tbody > tr:nth-child(4n+1).]
Assuming you're specifically setting the background color of the inner table (as I don't know of a CSS property value that will cause the selected elements to inherit the property's value from an element that is not the closest element in the chain that has the property set to a specific value) and you've already tried selecting the nested table as a child of the outer table (as per 3rror404's answer), you probably need to increase the specificity of the selector for the inner table.
http://www.w3.org/TR/selectors/#specificity
Here's the specificity calculations for CSS2.1 if you're working with an older browser: http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity
Related
Is it possible to apply a CSS style to an existing HTML table that is constructed as a tree?
For example, in Firefox, the Bookmarks Library table is constructed as a tree. Is it possible to apply a CSS style to one of the columns (but not the others)?
Using treechildren it is trivial to apply a style to an entire row. But how about applying a style to just one column?
CSS nth child should help you solve your problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
Here's a quick example fiddle: https://jsfiddle.net/0gztemg6/
And the CSS from the above example:
td:nth-child(2) {
background-color: red;
}
Use treechildren:-moz-tree-cell-text(*property*), replacing property with the appropriate property name.
For example:
#placeContent > treechildren:-moz-tree-cell-text(placesContentTags) {
color: blue !important;
}
Will color the tags column blue.
Works perfectly.
Is it possible to remove a table tag on a specific HTML location using only CSS? I have access only to the CSS file unfortunately.
I want to remove the image (which say "LOUIS INVESTORS RELATIONS") on the blue background here: http://louis.stockwatch.com.cy/nqcontent.cfm?a_name=fstatement&lang=en
It would be great if I could remove the whole table that contains that image.
Is it possible, and how?
Now use to this
table tr:first-child td:nth-child(2) img {
display: none;
}
Removing the whole table that contains that image means removing pretty much everything.
If you mean to remove the <td> that the image is within, that is possible, if you assume that no other <td> has an attribute with the background-color being set to #576f9c:
http://jsfiddle.net/YY98W/
table td[bgcolor="#576f9c"] { display: none; }
I want to change the background colour of alternating rows in a Bootstrap 3 grid. I thought that I could create some CSS and add it to the class in the div but the colour doesn't change.
Here's my CSS:
.row-buffer {
margin-top:20px;
margin-bottom:20px;
}
.row-even {
background-color:#76A0D3;
}
.row-odd {
background-color:#BDE3FB;
}
And my row is being defined like so:
<div class="row row-buffer row-even">
or:
<div class="row row-buffer row-odd">
The row-buffer is working perfectly but the row-even and row-odd don't seem to be making any difference? (My rows are being defined within a container.)
Am I barking up the wrong tree?
Without being able to see your exact situation I'm going to guess that you are having a problem due to selector specificity. If bootstrap has a more specific selector than just .class, then your rule will never override it. You either need to match or be more specific in your selector than bootstrap.
An easy way to typically gain a lot of specificity is to add an id to your selectors like :
#myrows .row-even {
background-color:#76A0D3;
}
#myrows .row-odd {
background-color:#BDE3FB;
}
I created a small example of how specificity can cause problems:
http://jsfiddle.net/path411/JyUy2/
These are the specific selectors you can override to change the color of odd rows in Bootstrap:
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: #your-color;
}
I assume you are trying to create different background styles/colors for alternating rows in a table.
The simplest way is to just add a self enclosing tag
<AlternatingRowStyle CssClass="danger" />
inside your table before the data.In a gridview control in asp.net just place this after the asp
gridview tag and before the columns tag.
You will immediately see the effect since Bootstrap has this predefined.
I hope my answer will help somebody in the future.
Cheers !
I have an issue related to vertical whitespace in a table. I'm using the border-spacing CSS property to add some space between the table rows (to make them appear less-crammed).
Data is added dynamically in the table, so there can be the situation in which I have no data in the table (no trs) but there is some vertical whitespace due to the border-spacing property (which is currently border-spacing: 0px 10px).
Is there a possibility to fix this through CSS?
Fiddle example with data: http://jsfiddle.net/lav911/QLsah/
Fiddle example without data: http://jsfiddle.net/lav911/yWRS7/
I mention that the intended functionality would be not to display the table at all when there is no data in it.
Edit: Testing on Chrome.
You can use CSS :empty pseudo, and than use display: none;
table tbody:empty {
display: none; /* Than get rid of it */
}
Demo (No display: block; required there)
Still a small black dot remains, it is because of the border of your table element, since there's no way as of now to select the parent element using CSS, you cannot eliminate that without using jQuery, by selecting the parent element and applying border: 0;
like this
DEMO
table {
border-collapse:collapse;
}
CSS is not capable of knowing if selectors have content. Since you're adding it dynamically though, if there is no data present add a class to the table. something like:
<table class="empty"></table>
then, in your CSS, add:
table.empty {
display:none;
}
since you're using a framework that may or may not be editable, you can add this JS (using jQuery):
$(document).ready(function() {
if ($('table tr').length == 0) {
$('table').addClass('empty');
}
});
I have created a sample page with a table. Should the page get deleted in the future, here's the code on Pastebin.
I want to highlight table rows on hover. It works for normal tr but it doesn't work for tr.alt (odd rows).
Code for highlighting:
tr:hover,tr.alt:hover
{
background: #f7dcdf;
}
Code for making odd rows different colour:
tr.alt td
{
background: #daecf5;
}
Any ideas how this could be fixed?
Make sure the rule for the hovering effect is below the .alt color as this overwrites previous rules or add !important
tr:hover,tr.alt:hover
{
background: #f7dcdf!important;
}
Also note you are applying the background color for the .alt rows to the cells (td's), this color will appear "in front" of the tr background so change your rules so both are for cells or for the whole rows
The problem is that tr.alt td is more specific then tr.alt:hover according to css cascading rules.
The easy way would be to make sure that the :hover rule becomes more specific then the .alt rule. This can be done by changing tr.alt td to tr.alt
As a sidenote, are you aware that you do not need the .alt class to target the odd rows? There is a very usefull :nth-child() pseudo class that can take care of that for you. You can read all about it here: http://css-tricks.com/how-nth-child-works/
I took the liberty to apply this to your sample: http://jsfiddle.net/3tV9b/
Note that all I did was change tr.alt td to tr:nth-child(2n+1) and removed all selectors that had the .alt class.
The big advantage of this technique is that you do not need to bother about maintaining the HTML, you can just add and remove rows as you wish, and the alternating color should keep working.
Disadvantage is (off course) the support in IE, but I think this is not really a loss of functionality, and well within the boundaries of graceful degrade.