I've seen a few other questions about first child stuff but I can't seem to be able to get anything to work.
I have a table and want the first column to be all bold but the rest of the text to be normal.
About the tables I have:
div.article table{
/* formatting stuff */
}
div.article table th {
/* formatting */
}
div.article table tr {
/* more formatting. I've got a funky looking table. */
}
So then I try:
div.article table tr:first-child {
font-style:bold;
}
but it doesn't seem to have an impact.
Any ideas? I suspect it's something really small but I'm overlooking it.
You should use:
div.article table tr td:first-child {
font-weight: bold;
}
With the way you have it set up currently you are specifying that the row which is the first-child of the table should have its font-style set to bold. There are 2 problems there, you should be using font-weight instead of font-style, and you are wanting to target all td's which are the first-child of their row.
Related
I have a table inside of a table, a really simple one.
What I wanted to do is to avoid having border-bottom of td tag in the last row (tr) of the table. What I did is this:
tbody tr:last-of-type td { border-bottom: none; }
I was thinking that this is it, but then I checked the last row of not nested table and the whole nested table was not having a bottom border. Is there a way to avoid this using simple CSS without classes etc.?
To achieve no border bottom of the nested table, you can do so like so:
tbody table td {
border-bottom: none;
}
Note - the above rule makes assumptions about your CSS, which you haven't shared with us. Due to you not including the CSS that applies the border in the first place, it is possible the above won't work due to CSS specificity.
For example, if your rule that adds border to the table is:
tbody tr td {
border-bottom: [whatever style];
}
Then, the selector you need to use to remove the nested table border is:
tbody tr table td {
border-bottom: none;
}
Add your CSS, and we can more accurately answer your question. Or, better yet - read the CSS specificity article, and you'll know how to alter the selector yourself!
I'd say the simplest way is to use class and id. Like so:
table.outer { some: style; } /* class */
table#inner { some: style; } /* id */
But as you said, AVOID classes, then perhaps call the table nested within the table like so:
table { some: style; }
table table { some: style; } /* override outer table */
I have a table that shows and hides certain rows based on some data, so I was hoping to do the row style with CSS, a la:
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
However, it seems MvcRazorToPdf can't apply these styles correctly to a table. Does anyone know how this can be done or why it won't work with MvcRazorToPdf?
I've been using the following jquery code to style table rows.
$('tr').hover(function() {
$('tr td').css('color', '#ffffff');
$('tr td a').css('background', '#0080ff');
});
$('tr').mouseleave(function() {
$('tr td').css('color', '#222222');
$('tr td a').css('background', '#ffffff');
});
This works just fine but I'm wondering there's a CSS alternative. It would seem like a much more efficient approach than what I have right now but I really don't know a whole lot about CSS.
The problem with using the following CSS
tr:hover {
color:#ffffff;
}
is that the anchor tags still remain the same color when the table row is hovered on. Are there any ways via CSS that hovering on a table row could trigger the anchor tags nested inside of the given table row to change colors?
It sort of depends on your other CSS selectors, but this will probably work:
tr:hover td {
color: white;
}
tr:hover td a {
background: #0080ff;
}
td:hover a {
your link style on row hover
}
After Google-ing and stackoverflow-ing, I still haven't been able to solve this one:
I have a table with about a dozen rows. One of the rows looks like this:
<tr class="rvw-product-total">
<td colspan="2"></td>
<td>Total:</td>
<td>$180.67</td>
</tr>
The last two TDs in this row (Total and $180.67) should have a green background-color and bold text.
So I can get this accomplished in CSS/LESS like so:
tr[class="rvw-product-total"]:last-child td, tr[class="rvw-product-total"]:nth-child(n+2) td {
font-weight: bold;
background-color: #DFF0D8;
}
That makes the background-color of the entire row green.
Then I've tried explicitly setting the background-color of the first TD to white, like so:
tr[class="rvw-product-total"]:first-child td {
background-color: #fff;
}
But the entire row still remains the green background-color, and I'm just curious what I'm doing wrong here?
Here's a quick demonstration on jsfiddle: http://jsfiddle.net/acegyver/EYVvc/2/
The first selector should be:
table.prod-rvw-tbl tr[class="rvw-product-total"] td:last-child,
And the second selector should be:
table.prod-rvw-tbl tr[class="rvw-product-total"] td:nth-child(n + 2)
Fiddle
You are should move :first-child on your last selector to td.
table.prod-rvw-tbl tr[class="rvw-product-total"] td:first-child {
background-color: #fff;
}
Btw, your selectors are too complex. It's better for performance to reduce it.
If you are just having .rvw-product-total class on <tr>s of this table, than it's sufficient to put the following selector:
.rvw-product-total td:first-child {}
I turned the selectors and overwrite the :first-child than using :last-child because it's better supported.
I also included the shorthand property background instead of background-color.
That should work for you: http://jsfiddle.net/acegyver/EYVvc/2/
I asked a question a few minutes ago and tried all of the suggestions. I still am having an issue getting this just right. I have found the block of css that is causing the issues and need a solution.
I have 2 files. The first file has all of the css that I used when I made the form. When I had the form looking the way I liked it, I put all of that relevant code into a different stylesheet. The new stylesheet is overriding some of my values and causing things to look bad.
This is what I want and is all I require.
#password #header td {
padding-top:90px;
vertical-align:top;
}
This however is the block of code that is making things break. I don't want any of this. Is there a way to override it? The line-height specifically is really making things look horrible. If I remove the line height attribute then other parts of my site break.
td, th {
color:#000000;
font-family:verdana,geneva,sans-serif;
font-size:12px;
line-height:17px;
margin:0;
padding:0;
}
You can override all the attributes in your general css declarations into your specific style and add !important to ensure it is followed, e.g. for line height you can use:
#password #header td {
padding-top:90px;
vertical-align:top;
line-height: normal !important;
}
Try changing line-height to something a little smaller. Something like this (targeting specific problem elements):
#password #header td {
line-height:10px;
}
You can also specify normal to line-height:
#password #header td {
line-height:normal;
}
You can directly override it in the specific style, like this:
#password #header td {
padding-top:90px;
vertical-align:top;
line-height:12px; /*Or whatever is relevant*/
}
Check out Firebug's CSS browser and calculator to see what is the "default" value.