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?
Related
In my CSS, I have an entry:
.isenabled {
font-weight:bold;
background-color:lightyellow
}
In the HTML, I have:
<table>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
This works as intended. What I'd like to do is:
<table>
<tr class="isenabled">
<td>This is enabled</td>
<td>So is this</td>
</tr>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
But this doesn't work as it stands (both the cells have the default background). What should I do instead?
[EDIT]
I've made the desired behaviour more explicit.
Use following style
tr.isenabled > td, td.isenabled {
font-weight: bold;
background-color: lightyellow
}
<table>
<tr class="isenabled">
<td>This is enabled</td>
<td>So is this</td>
</tr>
</table>
.isenabled is catching the element with class "isenabled".
that's why when you add class to 'td' it works.
<table>
<tr>
<td class="isenabled">This is enabled</td>
<td>This isn't</td>
</tr>
</table>
if you are adding class to 'tr' element the css properties will be applied to 'tr' but you want it to be applied on 'td'.
'>' is used for immediate child after the the selected element
so if you write "tr > td" as selected it will select all 'td' which are immediate child of any 'tr' in html document.
so you can do like this
tr.isenabled > td {
font-weight: bold;
background-color: lightyellow
}
it will select all 'td' which is immediate child of any element with class "isenabled".
Here is the more information about css selectors https://www.w3schools.com/cssref/css_selectors.asp.
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'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.
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.