I'm trying to combine an anchor-offset with an anchor-target-style on a table-row.
Having the anchor-ID applied to the table row and styling it via 'tr:target td' does achieve the desired look, while the solutions provided here ( offsetting an html anchor to adjust for fixed header ) achieve the desired offset, but only for text.
I can't use the top-voted solution as it requires the "display: block"-attribute which is incompatible to the tr-tag as far as I know. If somehow possible I would prefer a only css/html solution
The structure I use:
<table>
<tr id="anchor-target1"> <td> Something </td> </tr>
<tr id="anchor-target2"> <td> Something </td> </tr>
</table>
Update: JSFiddle-Example. Goal is to combine both functions: https://jsfiddle.net/7rknaqwu/5/
Related
Put bluntly I want to locate TestCoupon10% inside td then open a sibling td then locate //a[contains(#id,"cmdOpen")] I did try sibling and fellowing but likely I didnt do it right because
//span[./text()="TestCoupon10%"]/following-sibling:a[contains(#id,"cmdOpen")]
result into an invalid xpath. the HTML structure look as fellow
<tr>
<td>
<span id="oCouponGrid_ctl03_lblCode">TestCoupon10%</span>
</td>
<td>...</td>
<td>...</td>
<td valign="middle" align=""right">
<a id="oCouponGrid_ctl03_cmdOpen">
</td>
</tr>
I need to find cmdOpen and test coupon does anyone has an idea how to?
Axes are delimited with double colons, not single ones (those are used for namespace prefixes). You wanted to say this:
//span[./text()="TestCoupon10%"]/following-sibling::a[contains(#id,"cmdOpen")]
But - the <a> is not a following sibling of the <span> in question. You need to do some navigating:
//span[./text()="TestCoupon10%"]/parent::td/following-sibling::td/a[contains(#id,"cmdOpen")]
Or, simply avoid descending into the tree you you don't have to "climb up" again in the first place.
//td[span = "TestCoupon10%"]/following-sibling::td/a[contains(#id,"cmdOpen")]
An odd question maybe, but I want to use CSS3 to do this, but I am not sure if it's possible. I tried to experiment with nth-child and nth-of-type, but I could not get it to work. I guess it's very hard to get what I want without using Javascript.
Anyhow, let me tell you what I want...
I have three <tr> elements in a table which I want to give a background color. Beneath these table rows, we have three more table rows. Those will not get a different color. The problem: how do you select them? With even or odd, it's not possible... but is there a possibility to combine nth-of-type with even or odd? Or is this utopia?
I know that I can give these rows a class and make it work, but that is not what I am aiming for. Would love to solve it with CSS3, even if IE won't support it. Is there a way to do this?
HTML:
<table class="dummyclass">
<tbody>
<tr class="This_should_get_a_background_color">
<th>Dummytext</th>
<td>Dummy dummy</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Great game</th>
<td>yesterday</td>
</tr>
<tr class="no-background-please">
<th>Dummytext</th>
<td>Dummy dummy</td>
</tr>
<tr class="no-background-please">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="no-background-please">
<th>Great game</th>
<td>yesterday</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dummytext</th>
<td>Dummy dummy</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Great game</th>
<td>yesterday</td>
</tr>
</tbody>
</table>
And for the CSS, well I tried a lot of things like tr:nth-of-type(2n+1), but I saw here that that is not an option for me: http://css-tricks.com/examples/nth-child-tester/
For a fiddle, check here: http://jsfiddle.net/95vrb/1/
I have given the rows descriptive classnames, so that you can understand what I am trying to do.
There could be a better way of doing it but this works.
Basically it will add the background to every 6th child, starting from the 1st, 2nd and 3rd element.
http://jsfiddle.net/95vrb/2/
tr:nth-child(6n + 3),
tr:nth-child(6n + 2),
tr:nth-child(6n + 1) {
background: #f00;
}
I find this to be an excellent introduction to :nth-child http://css-tricks.com/how-nth-child-works/
You could use this:
.dummyclass tr:nth-of-type(-n+3), //First three rows
.dummyclass tr:nth-of-type(n+7) { //Last three rows
background: #aaa;
}
Fiddle: http://jsfiddle.net/Shiazure/95vrb/5/
Of course, this is tailored to the example you gave, and would need to be changed based on the number of cells/rows.
I am wondering if this is possible.
I have the following html table with a large html files (with other tables):
<table>
<tbody>
<tr>
<td class="someCell"></td>
</tr>
</tbody>
</table>
Is there a CSS selector to select the table element of the cell with class someCell?
There is currently no way to select the parent of an element in CSS, but the following works with jQuery:
$(".someCell").parents('table').addClass("someClass");
The html table coding structure looks something like the code shown below
<table>
<tr>
<td>Text</td>
<td>input text field</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>submit butto</td>
</tr>
</table>
How to create such table structure in flex which has above given row and column format in flex application with the option of colspann and rowspan alternate too?
There are a lot of ways. I would probably start by looking into the Form layout container. That is great for a two column layout, although it gives you little control over the first column which is primarily used for
You could also, in theory, create something like this by using embedded containers, but I do not think I would recommend that approach because I suspect you'll end up with a lot of unnecessary containers.
You could also write your own layout class. More info on layouts here. This is the most powerful/flexible approach, but probably also the most time consuming.
I created a design for my website. I am planning to make it with TABLES because it seems to be the easiest. The tables are not going the way I intended.
There was a problem putting the code on the page so I put my HTML document (.html) and the way I want it to look (.jpg) in the below zip-file link:
http://ericlounge.host22.com/000/22014/0aa.zip
If someone could give me the code or explain my error that would be great!
I would avoid using tables, but it's your choice.
<Table>
<TR>
<TD rowspan ="3">
Navigation
</TD>
<TD>
TITLE
</TD>
<TD rowspan ="3">
SideBar
</TD
</TR>
<TR>
<TD>
ADS
</TD>
</TR>
<TR>
<TD>
Content
</TD>
</TR>
</Table>
This does not answer your question, however, it will give you reasons why you should look at a different approach for your layout/design rather than tables.
Why not use tables for layout in HTML?
To counteract the "tables is the easiest" option then have a look at Yahoo's YUI templates and examples. These can probably produce exactly what you are after with little effort.
http://developer.yahoo.com/yui/grids/