I have html like this below - and do not have access to modify it beyond setting a class or id on the first "td" in the row. Is there a way to target the entire row, or get both "td" elements in the row?
<tr>
<td width="50%" valign="top"><font class="subheader"><span class="eField">membershipCode</span> </font></td>
<td width="50%" valign="top"><font class="text">Testing </font></td>
</tr>
Part of this goes out in Email, so I'd rather avoid Javascript if possible. I tried this css, but no luck so far:
<style type="text/css">
td span.eField {
display:none;
}
td span.eField+td {
display:none;
}
</style>
Is there any way to do this using pure css?
NOTE: I only want to target rows containing the "eField" elements - I can hide the element itself, but can't get the next or the entire row. So I don't want to hide all rows in the table, just a select few.
Thanks,
-Jim
Yes indeed You can do it using normal css like the following fiddle demonstrates:
using the following two methods
table tr td
or
table tr
http://jsfiddle.net/qLynh5n1/
I do not quite understand what you're trying to do.
But can't you just use:
tr,
td {
css:css !important;
}
?
I understand you are try to select the parent of the span with class eField.
CSS has the descendant selector but not the other way around.
a > img { border: none; } - valid - all img directly under a
a < img { border: none; } - not valid - all a directly above img
Refer this link
Related
I am trying to target the "Holders" value on this page (364578 addresses at time of writing this).
I have tried a few different css targets with no success:
.table tr:nth-child(3) td:nth-child(2)
as well as
#ContentPlaceHolder1_tr_valuepertoken.next('tr td:nth-child(2))
Here is a picture of the html structure
How can I target the "Holders" value on this page?
Sorry I did not noticed the css tag for this question.
Use this for css:
tr:nth-of-type(3) td:nth-of-type(2) { background: red; }
To target that using css, you can add an id to that element.
This would look like:
<td id="id">Holders:
</td>
that way you can modify it using css.
#id {
/*Your css*/
}
hope this helps!
Note: the /*Your css*/ is just a comment. Remove it before you add your actual css.
You can use this way like a matrix:
tr:nth-of-type(3) td:nth-of-type(2) { background: red; }
I am working on a project where I am sending html to a PDF creator, so I'm not too worried about proper html as long as it shows up correctly on the PDF.
I am currently working on a PDF where about half the page is in a different size font than the other. I was hoping to accomplish this easily by putting tags around the selection. However, there are tables and lists which are not inheriting the css styles.
For example:
CSS:
.fs8
{
font-size:8pt;
}
HTML:
...
<p>Size 10 text here...</p>
<span class='fs8'>
<p>This text is size 8</p>
<table>
<tr>
<td>This text is NOT size 8</td>
</tr>
</table>
<p>Still size 8...</p>
<ul>
<li>NOT size 8!
</ul>
</span>
<p>Size 10 again...</p>
Is there any good way to span across tables and lists, so I don't have to add class tags in hundreds of places?
Not sure if i got what you meant but from what i understand you want to refine your selectors.
Try this:
.fs8 td,
.fs8 li
{
font-size:9pt;
}
This would set font-size to 9pt in any td or li tag inside an element with class fs8.
you should use a div instead of a span because span is by default an inline element, meaning it should not contain block level elements, such as table or ul. Now for the CSS.
.fs8 {
font-size: 8px;
}
.fs8 table,
.fs8 ul {
font-size: 10px; /* not 8px */
}
That should do the trick. You will not need to add classes to any items except the wrapping div, remember it cannot be a span, so replace it with a div for proper behavior.
Using span tags around table elements is simply invalid markup, so all bets are off. Consider using div instead or directly assigning the desired CSS properties to applicable elements.
I know you don't want to do the class tags but you don't have to put it on all of them. you can just put a div around the entire thing, not a span tag those can be overridden by outer settings. I have had that issue before so do something like this:
<div id="my_settings">
<table>.....
</table>
<ul>....
</ul>
</div>
then in your css do this:
#my_settings li, #my_settings li, #my_settings p{
font-siz: ....;
}
I'm not entirely sure if this is what you want but it might be easier than adding a class to all of them.
Since you want a quick and possibly dirty solution, you could use the wildcard selector
.fs8, .fs8 *, .fs8 * *, .fs * * * { font-size:8pt; }
(you need all 3 for tables (span > table > tr > td)
Although, be warned that there might be undesirable side effects!
Also, you should be careful about the tool you use to generate PDF, some generate the file using an old browser rendering engine (hello ie6 rendering). In fact, it's probably why you are having issue, as this example works perfectly on ie8, but not in quirk modes..
I'm not sure about your question, but I will try to anwser:
p { font-size:10px; }
.fs8 p { font-size:8px; }
or
p, td, li { font-size: 10px; }
span.fs8 p { font-size:8px; }
Is it possible to apply style to all td's inside the table having specified ID?
Yes, via descendant selector
#table-id td { background:red }
HTML
<table id="table-id"><tr><td>Hi</td><td>, There</td></tr></table>
fiddle: http://jsfiddle.net/FjpBa/1/
I am new to CSS and am working on an intraweb application which will render in modern standard browsers (IE support is not necessary). I have spent much time looking for answers on this and other sites, only to find the answers "It's impossible because..." or "Do this hack instead...." but I just won't accept that.
Here's what I need:
A table with one header row and multiple body rows;
A solid border under the header row;
Vertical white space (padding? margin? spacing?) between the header row and first body row only;
Body rows being highlighted on mouse hover.
I couldn't get (2) to be visible until I styled the table border-collapse: collapse;. Fine. But (3) apparently only works with border-spacing, and only on <td> elements (not <tbody> or <tr>), which is anyway disabled by the collapse. Meanwhile, for some unknowable reason, margin's are not recognized for <thead>, <tr>, or <th> elements, but having padding-top on the first row of the body's <td>'s works, except it doesn't, because when I mouse over that first row, the whole margin-which-is-implemented-as-padding gets highlighted as well, which nauseates me.
I know having a few pixels of margin between a table's header and body is like a really out-of-left-field, why-would-anyone-ever-want-that thing to want, but what should I tell you? I'm no cheap date.
Please be as brutal and condescending as you can in pointing out my stupidity in understanding CSS, provided you also either 1) say how to do it without changing the markup (thereby preserving the separation of presentation from content CSS was evidently designed to encourage) or 2) agree with me that CSS is weird.
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
</body>
This would fix your problems without any hacks and ofcourse its completely possible. The updated code(only CSS changes) is shared below with explanations.
Problem 3 :
We can make use of the CSS selector :first-of-type(targeting only the first row) in succession with all the <td> under it and use attribute padding-top. Simple :-)
<tr> cannot have margin values by default. Again hacks are available(above mentioned answers) but I wouldn't go there as you don't want it.
And also since we have used padding, the hover effect would work perfectly on the entire row content. Hence getting the desired change without any markup changes.
Problem 2 :
We can remove the attribute border-collapse from table and instead apply the border on the <th>tags (let the border-spacing: 0 remain or the border would be discontinuous). Simple again :-)
Problem 1 and 4 are already covered. No markup changes as you wished. Here is the Fiddle
So the updated style code would look like
<head><style>
table {
border-spacing: 0;
}
thead tr th {
border-bottom: 4px solid #123456;
}
tbody tr:hover {
background-color: #ABCDEF;
}
/*** added ***/
tbody tr:first-of-type td {
padding-top: 10px;
}
</style></head>
Okay, in order:
1: A table with one header row and multiple body rows:
This is what the elements thead and tbody were designed for:
<table>
<thead>
<tr><th>heading one</th><th>Heading two</th></tr>
</thead>
<tbody>
<!--
all body table rows in here
-->
</tbody>
</table>
There's also tfoot (see references), which, if used, must be declared before the tbody element.
2: A solid border under the header row:
thead tr th {
border-bottom: 2px solid #000;
}
Select the th elements within the thead element, the tr selector is probably unnecessary here, and, while it does no harm, can be simplified to: thead th {/*...*/}.
3: Vertical white space (padding? margin? spacing?) between the header row and first body row only. padding, it seems, cannot be applied to the thead, tbody or tr elements, since they're, essentially (I suppose) 'non-visual', so it has to be defined on the td elements. This does, on hover, mean there's a disconcertingly large 'row' occupied by the first row during the :hover (see the next part).
tbody tr:first-child td {
padding-top: 1em;
}
4: Body rows being highlighted on mouse hover.
tbody tr:hover td {
background-color: #ffa;
}
While you can apply a :hover to the currently-hovered cell, and later siblings (with the general sibling ~ combinator) you can't apply a style to siblings that appear previously, so here we're styling the td elements in response to the :hover of their parent tr.
The reason that we have to style the td (rather than directly change the background-color of the tr is because td elements don't typically default to a transparent background, which means the changed/highlighted background-color is 'hidden' by the background-color of the td elements.
JS Fiddle demo.
References:
Table row-groups, thead, tbody, tfoot elements.
In order to apply margin to the first table row you need to make it display: block; first, as margin can only be applied to block elements (including inline-blocks)
But here is another solution using positioning:
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
position: relative; /* Add positioning */
margin-top: 40px; /* Add some margin */
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
thead {
position: absolute; /* Position this element absolute */
top: -40px; /* And move it up */
}
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
<p>Thats how its done!</p>
</body>
Basically we apply position: relative; to the table and position: absolute; to thead.
Now you can move the thead inside the table using top, bottom, left and right properties. We are going to move it up by 40px using top: -40px;
We do not apply position: absolute; to tbody, because if we do - this element will no longer 'strech the page' or in other words all the following elements will ignore its height. (try doing it and see what happens to the following block)
The only thing we got left - is to apply some margin-top to the table itself, moving it down (as we moved the thead up)
Yes, CSS can seem a bit weird from time to time, but this is mostly because we forget how some page elements are supposed to be handled (namely tables and their child elements)
What about adding an empty row at the beginning like
<tbody>
<tr><td> </td></tr>
<tr><td>blablablabla</td></tr>
And use this CSS
tbody tr:first-child td{
padding-top: 15px;
}
tbody tr:first-child:hover{
background-color: transparent;
}
So the padding will be added to first row and first row won't highlight on mouse over? :)
All your 4 points are covered there-
First download metro ui css here http://metroui.org.ua/
Include its two css file 1. metro-bootstrap, 2.metro-bootstrap-responsive into your project.
Register that in BundleConfig.
bundles.Add(new StyleBundle("~/Content/css/metroUI").Include("~/Content/css/metro-bootstrap.css",
"~/Content/css/metro-bootstrap-responsive.css"));
Now use class "gr-items" for table
< table id="divAllActivities" class="gr-items">
<thead>
<tr><th><span>Comment</span></th></tr>
</thead>
<tbody>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
</tbody>
Hope this is what you want.
Using css selector how am i supposed to write a selector so that only table rows that have data display cursor as pointer. I tried below but nope
table tbody tr:not(tr>th)
is this cross browser and works event in IE6?
That is not a valid CSS selector; you can't put combinators inside :not().
Your best bet is to put header rows (i.e. <tr> elements that contain <th> elements) inside a <thead>, leave the rest of the rows in your table's <tbody>, and simply use this:
table tbody tr {
cursor: pointer;
}
If you can't modify your HTML, it's not possible with CSS selectors alone, especially not with your requirement of supporting IE6. Use JavaScript instead; here's an obligatory jQuery example:
$('table tbody tr:not(:has(th))').css('cursor', 'pointer');
Assuming that your header row will always be the first row, you could do this:
table tr:not(:first-child) {
background:red;
}
This selects all tr elements except the first-child (as in, the first of the matched elements).
This does not work in IE6 or any other version of IE except IE9.
But yes, if you do require IE6 support, Javascript must be used.
you can do it using <thead> tag.
In my case table looks like:
<table>
<thead> <tr><th>... </thead>
<tbody> <tr><td>... </tbody>
</table>
this will be applied for all tables:
tbody tr{
background: yellow;
}
this is only for tables which has header:
thead+tbody tr{
background: red;
}
Basically I tried solutions above but in my case I wrote something different to make it works. I don't know if it's better to use :hover or not for cursor.
table tbody>tr:hover {
cursor: pointer;
}
In my case table is coded like that
<table>
<thead>
<tr>...</tr>
....
</thead>
<tbody>
<tr>...</tr>
...
</table>
At all, I wanted to add style to entire line and not tr themselves