I'm trying to "zebra" color my table rows (odd = dark, even = light). However, because of my application, where the user is able to hide rows using selectors, it won't have the zebra effect because of the pseudo selectors selecting everything, and not based on what's "visible".
This is nothing new, and it's been discussed many times before:
Select odd even child excluding the hidden child
Zebra striping a table with hidden rows using CSS3?
In the same table, I'm using CSS's "count" feature, to visibly display row numbers for each row, and THESE are only applied on visible rows (discards rows with display:none)
table {
width: 100%;
background: white;
counter-reset: rowNumber;
}
tr > td {counter-increment: rowNumber;}
tr td::before {
content: counter(rowNumber);
color: blue;
}
tr:nth-child(even) {
background: red;
}
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr style="display:none;">
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr style="display:none;">
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
https://jsfiddle.net/cr6yo00w/1/
My question is (haven't seen this asked anywhere):
Is there a way to combine the two and zebra-color my table this way? Is it possible to extract the even/odd from the count?
EDIT: This was flagged as dupe -- As I've already stated myself, the odd/even selector has been discussed before. My question specifically relates to a possible way of combining odd/even selector WITH the CSS rowNumber count.
Related
I have a two column layout in sharepoint online and upon page inspection I can see that it has a table with two columns. I'm trying to hide one of the columns for printing, which is working just fine, but sharepoint has specified the width of the first column as 66%. It has no class or id. I cannot change this.
I am able to change the width of the column, but the problem I'm seeing is then that the % of the columns on the inside table is also changing, even when I use a specification of nth-child(1) on the id of the outer table.
I won't submit you to the mess of code that is sharepoint but the layout is like this:
<table>
<tbody>
<tr>
<td>
<table width="100%>
<tbody>
<tr>
<td style="width: 25%>></td> <-this is getting stretched.
<td style="width: 25%>></td>
<td style="width: 25%>></td>
<td style="width: 25%>></td>
</tr>
</tbody>
</table>
</td>
<td>
</td>
</tr>
</tbody>
</table>
#media print {
table#layoutsTable td:nth-child(1) {
width: 100% !important;
}
}
I have a table which I am trying to print. So the basic structure is contains a nested table both containing thead. Once I do a print, the pdf shows overlapping thead.
Please find attached link to reproduce the code. https://www.dropbox.com/s/a0l0s7blh401tg7/table.html
<table>
<thead>
<tr>
<td>heading</td>
</tr>
<tbody>
<tr>
<td>
<table>
<thead>
<tr>
<th>Heading 2</th>
</tr>
</table>
</td>
</tr>
</tbody>
</thead>
</table>
Try the following css (this only helps if you have a very plain thead an only one aswell):
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
Edit:
Regarding your question: The reason why your thead is overlapping is your table markup itself. Right now we have multiple table and thead, and also padding which is causing the overlapping. I did some research and found two different solutions you could use.
Fact 1: Only the lastest thead in your markup will be place on a second page when printed. Therefore you can check and adjust your table like this working example here, print button on the top :
<table>
<!-- thead on first page -->
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<!-- thead on first page an all following -->
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Fact 2: In my opinion the only working solution if you want all your thead information on all pages is to move all th in one thead at the top of the table, therefore you will have all informations on every page working example for this solution, print button on the top
Hopefully this helps :)
I'd like to select all of the child td elements of the second child of a tbody element. Here is the selection I am trying to achieve:
<table>
<thead></thead>
<tbody>
<tr></tr>
<tr>
<td>I want to select this td</td>
<td>And this one</td>
</tr>
</tbody>
</table>
tbody:nth-child(2) > td
{
//insert rules
}
However this is not working. Does CSS3 support selecting children of pseudoclasses? If not, any advice on how to achieve the above selection would be greatly appreciated.
Thanks for you input.
tr:nth-child(2) does what you asked for:
tr:nth-child(2) {
color: red;
<table>
<thead></thead>
<tbody>
<tr>
<td>not me</td>
<td>And not me</td>
</tr>
<tr>
<td>I want to select this td</td>
<td>And this one</td>
</tr>
</tbody>
</table>
tbody:nth-child(2) > td won't work because only <tr> elements can be children of <tbody> elements.
to select all second td try it:
td:nth-child(2)
{
//
}
but if you wan't to select all td in the second child you can try :
tr:nth-child(2)
{
//
}
Yes you can mix pseudo-selectors and the child selector (did you notice your typo on child?):
.a-class:nth-child(2n) > .child-class
ie10 is not showing fine border over colspan.
It is showing well on other browser, but not on IE 10.
I'll post my code below.
HTML CODE:
<table>
<thead>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="4">3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td colspan="2">7</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td colspan="3">4</td>
<td>5</td>
</tr>
</tbody>
</table>
CSS CODE:
table tr td {
border: 1px solid black;
width: 100px;
}
table {
border-collapse:collapse;
}
border under 7 is gone. How can I show it?
here is example on jsfiddle :
http://jsfiddle.net/H4z7Q/
ADD: If some event occurs in ie10, border come back to normal.
You can use table inline style stats. instead of border-collapse:collapse;
<table cellpadding=0 cellspacing=0>
will count as same effect.
but will return and will chrice ur problem
The markup violates the HTML table model, as you can see by checking it with http://validator.w3.org which says, referring to the first row: “Table column 6 established by element td has no cells beginning in it”.
So all bets are off. Modify the table structure so that it conforms, or try to achieve the desired layout using other tools than a layout table.
suppose I have a nested tables in html like this
<table>
<tr>
<td><table>
<tr>
<td></td>
<td></td>
</tr>
</table></td>
<td></td>
</tr>
<tr>
<td><table>
<tr>
<td></td>
<td></td>
</tr>
</table></td>
<td></td>
</tr>
</table>
Now I want to do style only to the parent table without adding any markup like any class or IDs. so how can I do that only in css.I just want to select the parent table.
You can't specify the parent table in a selector, but you can specify the child tables, so you can style all tables, and then override the style for child tables:
table { background: red; }
table table { background: none; }
You could probably use table:first.
But it's advanced selector which I personally wouldn't trust that much in pure CSS. There is also a reason why there are classes and ids so why not use them?