Suppose I have the following table (JS Fiddle):
<table class="data-table">
<thead>
<tr>
<th scope="col">Method</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pickup*</td>
<td>no charge</td>
</tr>
<tr>
<td>Campus mail</td>
<td>no charge</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">* At 1st floor desk</td>
</tr>
</tfoot>
</table>
The rows of the TBODY have been zebra striped using an :nth-child(2n) selector. But the background of the row in the TFOOT doesn't get those styles, and breaks the even/odd striping any time the table has an even number of rows in the TBODY.
I'd like to select the TFOOT row with something like .data-table tbody tr:nth-child(2n):last-child + tr, but that won't work. The + selector is for adjacent sibling elements that share a single parent element. The two TRs here aren't siblings, they're cousins.
I could use jQuery (something like $(".data-table tbody tr:nth-child(2n):last-child").parent().next().find("tr").css({"background-color": "blue"})). But I'd prefer a CSS solution if there is one.
So, is there any way to select an element's cousin?
CSS works down the DOM (although selectors are processed backwards), so you can't navigate up an element tree and then back down to reach an element's cousin. You can only either operate on the same level of elements (only going forward), or go down.
You'll have to go with your jQuery solution.
Reference:
http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#selectors
No, there are only decendant and limited sibling selectors. You would have to use javascript to locate the element.
Related
I have an HTML table with many rows and several columns. I want to append a td to some of these rows such that the td would look like a new row and span the entire width of the table. This is useful to keep all of the data for a single table row under the same tr tag and would allow me to show extra data that relates to that same row but that won't fit in a single table column, like long-form notes. For example:
<table>
<thead>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</thead>
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td class="magic" colspan="3">
This is long-form data that should look like a full-width
row without creating an extra tr tag to hold it.
</td>
</tr>
</tbody>
</table>
Note that the same table also uses jquery-ui's sortable api to allow the rows to be drag/dropped in order to sort them. Also, the end result is then printed.
How do I do this without messing up my markup with illegal divs or abandoning html tables altogether?
You can use CSS flexbox property to achieve what you are trying, use a class selector for the specific row you want to span the width.
Flexbox has a property flex-direction which let's define the flow of the children of a component to either column or row
Example; Link to a codepen demo
Ps; I have not tested it on a jguery UI.
You can use the colspan attribute for this:
<tr>
<th colspan="5">Full-Width Row</th>
</tr>
Replace the 5 with the number of columns in the table. I haven't confirmed this works with jQuery UI, but it's pretty quick to test it out.
I'm testing with Selenium Webdriver in Firefox and ideally also in IE8.
Here is my html structure:
<table id="table">
<tbody>
<tr>
<td>Text1</td>
<td><a id="assign" href="/assign/1>Assign</a></td>
</tr>
<tr>
<td>Text2</td>
<td><a id="assign" href="/assign/2>Assign</a></td>
</tr>
<tr>
<td>Text3</td>
<td><a id="assign" href="/assign/3">Assign</a></td>
</tr>
</tbody>
</table>
Basically what I need to do is this:
Click on the assign link on the row that contains Text1
So far i came up with the XPATH: //*[#id='table']//tr/td//following-sibling::td//following-sibling::td//following-sibling::td//a that selects all the assign links. Changing it to //*[#id='table']//tr/td[text='Text1']//following-sibling::td//following-sibling::td//following-sibling::td//a returns "No matching nodes" from Firebug.
However, I want a CSS selector for this. So, i tried #table>tbody>tr:contains('Text1') but Firebug returns "Invalid CSS Selector".
Any suggestions ?
You should find the td that has preceding td sibling tag with Text1 text, then get the a tag:
//table[#id="table"]//td[preceding-sibling::td="Text1"]/a[#id="assign"]
Alternatively you can find 'tr' having 'td' with text = 'Text1' and then inside the 'tr' find 'td' having text 'Assign'
//table[#id='table']//tr[td[.='Text1']]/td[.='Assign']
About css selectors, there are no pure css selector for text based search. 'contains' is not standardized yet, so may not work in your case.
I am having an issue stylizing a class in the first table while keeping the rest of the tables the same. Let me show an example
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
So I want the class a of the first table to be different than the rest of the tables. How do I go about doing that?
Thank you for your time.
Edit:
I forgot to mention. I cannot add separate classes on each table. I can only give them all the same class. It is generated that way.
In newer browser you can use CSS3's nth-child():
table:nth-child(1) tr.a{
background-color:#ff0000;
}
This works if this is the 1st child of the parent element (e.g. say that these 3 tables are the children of the body.
You can be also more specific that this is the nth table element using the :nth-of-type() selector.
I am new to modifying column groups in tables and trying to learn how label the css to make the TH in the featured column group a specific background color, as well as the TD's inside that column group. My only problem is, I don't know how to setup the CSS to reflect ONLY those sections.
I have made an example table located at: http://jsbin.com/ocezon/1/edit
If I didn't phrase this correctly, please let me know and I will try to explain further. I have labeled the TH and the TD's I'd like to be able to modify using the #table-5 #featured attribute assigned by column group.
I've tried code like #table-5 #featured TH { background: #000; } but that didn't work.
EDIT: I found out that this probably isn't possible (and after trying numerous methods, I can't make it work either)...so I decided to give the answer to One Trick Pony for suggesting a method that does work; however, I slightly modified this method to make it easy to modify in the future: http://jsbin.com/icasom/1/edit
Without using colgroups, you can style the 3rd child of each row:
#table-5 th:nth-child(3){
background: blue;
}
#table-5 tr td:nth-child(3){
background: #C0000E;
}
http://jsbin.com/ocezon/3
I modified this to make it easier to work with multiple tables and make modifying in the future easier: http://jsbin.com/icasom/1/edit
your table has a strange HTML structure, colgroup and th not even wrap in a tr :
<table id="table-5">
<colgroup>
<col class="row" />
<col class="basic"/>
<col class="premium" id="featured"/>
<col class="enterprise"/>
</colgroup>
<thead>
<tr>
<th>row</th>
<th>basic</th>
<th>premium (modify this TH)</th>
<th>enterprise</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah (modfy this TD)</td>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah (modfy this TD)</td>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah (modfy this TD)</td>
<td>blah</td>
</tr>
</table>
you could maybe add somme rgba color to darken your background-colors:
http://jsbin.com/ocezon/9/ http://jsbin.com/ocezon/9/edit
Please help me with CSS selector.
I need to apply special attributes to the last row in a table, which (row) does'n have specified class, for example class "zzz".
<table>
<tbody>
<tr class="odd">...</tr>
<tr class="even zzz">...</tr>
<tr class="odd">...</tr>
<tr class="even">This one should be selected</tr>
<tr class="odd zzz">...</tr>
<tr class="even zzz">...</tr>
</tbody>
</table>
I'm looking for only pure CSS solution, not javascript one. Please don't suggest :not() pseudo-class, as some browsers do not support it.
Thank you for your help,
--Vadim
Sorry, this is not doable with pure CSS, not even with a selector that only modern browsers support.
I'm not 100% certain i fully understand, but you can use something like
tr:last-child
in your css