I know of the selector :not() but it doesn't work, like tr:not(tr:first-child):hover. I want to style the other trs but not the first one, because it holds the headings. How can I do this without using an id or class?
You can only use simple selectors in :not(), try
tr:not(:first-child)
http://jsfiddle.net/mowglisanu/Sn7Uw/
Another option would be to use the th element which is specifically represents the header cell in a table.
Example
<table>
<thead>
<tr>
<th>Number</th>
<th>element</th>
</tr>
</thead>
<tbody>
<tr>
<td>4.1.1</td>
<td>html</td>
</tr>
<tr>
<td>4.2.1</td>
<td>head</td>
</tr>
</tbody>
</table>
Use the adjacent sibling combinator. As a bonus, it's a bit more widely supported than :not()
TR + TR { background-color: silver; }
TR + TR:hover { background-color: green; }
http://jsfiddle.net/ETYQN/2/
Put your headers in a <thead> and your stylable rows in the <tbody> then use:
tbody tr:hover { background: red }
and it won't matter what the contents is.
http://jsfiddle.net/stevemarvell/we4a6/
Related
I am trying to hide this:
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
And this is my attempt:
thead.col-image all {
display: none;
}
^ this didn't work - any idea?
Thanks!
You are calling the wrong element and ALSO 'all' is not a selector;
thead.col-image all {} // is calling e.g. <thead class="col-image">
It should be
thead tr th.col-image.all { display: none; }
thead.col-image all means <all> tags in <thead class='col-image'>
correct css for your code should be
thead .col-image.all {
display: none;
}
https://jsfiddle.net/pb5k4v63/26/
with <th> tag only heading will disappear.
Attach a class for <th>or <td> or <tr> depending on your requirement.
and for that class apply the property
{visibility:hidden} which will not affect alignment of your table.
where as {display:none} can affect the alignment (though it works.)
you can use class for td th or add a span to text you want to hide and add class to it
.hide{
visibility:hidden;
}
<table>
<tr>
<td>hello</td>
<td class="hide">hide me</td>
<td>and also <span class="hide">hide me</span></td>
</tr>
</table>
TL;DR Wrap your <thead>, <th>, etc. within the <table> element. Also make sure you are calling the proper elements in your CSS.
An HTML table is defined with the <table> tag.
So in essence you have the <th>, <thead>, etc. elements operating outside of a <table>, so you are breaking your code because the <th>, <thead>, etc. require the parent <table> element to function properly.
Why you may ask? As stated above a table is defined with the <table> tag, so you do not really have a table on your page.
In conclusion "wrap your tables rows, heads, etc within the <table> element for now on.
Here is the code:
HTML
<table>
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
</table>
CSS
th.col-image.all{
display: none;
}
You can view the code live here: https://jsfiddle.net/W3Develops/nbf17pus/6/
I also added another table in there so you can see how to properly make a table.
Here is a link to Mozilla Developer Network and W3Schools so you can learn more about making tables. Good luck:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
https://www.w3schools.com/html/html_tables.asp
Also you were calling classes for thead when you should have been calling classes for th.
Cheers.
Lets say we have generic css class for table to use on all places in our application. Lets consider also this style has first-child selector.
tr td:first-child { ... }
I would like to use this class for an specific table but skip all first-child styles.
Since this is generic style class for tables i cant remove from it and also dont want to handle this with inline styling.
Thanks
You could be more specific for that particular table, assuming it has a class or an id you can use:
tr td:first-child {
color: red;
}
.test tr td:first-child {
color: green;
}
<table>
<tr>
<td>First td</td>
<td>Second td</td>
</tr>
</table>
<table class="test">
<tr>
<td>First td</td>
<td>Second td</td>
</tr>
</table>
Excuse the limited markup, but you get the point. Because the .test tr td:first-child {} class is more specific than the generic style, it overrides it, but only for the table with the class test.
More info on specifity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
table {
border-collapse: collapse;
border : 1px solid #e2e2e2;
}
caption, th, td {
text-align: left;
line-height: 1.4;
padding: 8px;
}
tr {
border-bottom: 1px solid #ccc;
vertical-align: top;
}
<table>
<caption>Optional table caption.</caption>
<thead>
<tr class="heade_class">
<th>#</th>
<th style="display:table-cell">First Name</th>
<th style="display:table-cell">Last Name</th>
<th style="display:none">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td style="display:none">#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td style="display:none">#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td style="display:none">#twitter</td>
</tr>
</tbody>
</table>
code here is just example here note that th and tr are dynamically set with the values.
hi guys i wan to select only last th of the which having the style"display:table-cell" property only
now i have tried little bit with using last-child
here i can get the all th with the style"display:table-cell" property only but could not find last th among them
using only css
.heade_class th[style*="display: table-cell"]:last-child {
}
In short, you cannot do this with CSS alone.
The Problem
First of all, spaces are important. You cannot have a space after th and the style attribute must match exactly the same as the style defined in the HTML. So for it to be valid it should be as follows:
.heade_class th[style*="display:table-cell"]
However, you still won't get what you want because last-child doesn't work as you think. In order for it to match it must be the last child, not just the last element that matches your other specification.
So if you consider this:
.heade_class th[style*="display:table-cell"]:last-child
What it means is as follows:
Is a th element
And the style attribute contains display:table-cell
And it is the last child element
For this you will notice none of your elements match all three conditions and that is why it doesn't work.
Other Options
Some other options, but they are probably not quite what you are looking for:
You could try nth-last-child as follows, but it relies on you knowing how many elements are going to be hidden after it, which probably isn't what you want:
.heade_class th[style*="display:table-cell"]:nth-last-child(2)
An alternative, depending on how you render your HTML, would be to either omit the hidden ones completely, or change the hidden ones to td. If you change them to td then you can use last-of-type like so:
.heade_class th:last-of-type
But you may want to check the browser support for that before using it.
I have a table that I want to select the very first TH only if it contains a caption. I thought it might be something like this:
.myTable caption + tr th:first-child
{
/* stuff */
}
It's instead selecting nothing. Is this a bug in CSS or just my logic?
See my JSFiddle: https://jsfiddle.net/ukb13pdp/1/
.objectTable th:first-child
{
background-color: blue;
color: white;
}
.objectTable caption + tr th:first-child
{
background-color: red;
}
<table class='objectTable'>
<caption>Caption Table</caption>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<br/><br/>
<span>No Caption Table</span>
<table class='objectTable'>
<tr>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
The cause here is exactly the same as the one described in this related question about the use of child selectors with tr. The problem is that tr elements are made children of an implicit tbody element, so what ends up being the sibling of the caption is that tbody and not the tr:
.myTable caption + tbody th:first-child
As an aside, if your th elements reside in a header row they should ideally be contained in a thead element and the data rows contained in explicit tbody element(s):
<table class=myTable>
<caption>Table with header group</caption>
<thead>
<tr><th>Header<th>Header
<tbody>
<tr><td>Row 1<td>Row 1
<tr><td>Row 2<td>Row 2
</table>
And selected using
.myTable caption + thead th:first-child
You're forgetting about the <tbody> element which wraps the <tr> element. Even though not specified in your (otherwise invalid) HTML, the <tbody> element is automatically implemented by the browser as a way of validating this, so instead of:
<caption>
<tr>
You end up with:
<caption>
<tbody>
<tr>
As seen in this element inspector capture below:
To select the very first <tr> element after a <caption> element, you can instead use:
caption + tbody tr:first-child {
...
}
JSFiddle demo.
Lets say I have the following table:
<table style="width:500px">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
Now if I use the first-child selector to apply a style to the first TD, is there anyway I can have it ignore the td that has the colspan (even though of course this is the first-child)?
table tr td:first-child{
width:100px;
}
I would be happy to give the td with the colspan it's own class name if there was then a way I could modify my selector to say apply to first child except when the class name is x?
use :not([attr="val"])
table tr td:first-child:not([colspan="#NUMBER OF COLSPAN"]){
width:100px;
}
Try this:
table tr td:first-child:not(.ignore) {
width:100px;
}
(Where you give the td that you want to ignore a class of "ignore")
Why not just give the class the opposing property?
table tr td:first-child{
width:100px;
}
.your_class {
width:auto !important;
}
One simple way is to just add a class to the first TD that you actually want to select:
<table style="width:500px">
<tr>
<td class='selectable'>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
Then hit it with:
table tr td.selectable {
width: 100px;
}
Alternatively, you could try jQuery and put a class name of "ignoreMe" on the row you don't want affected with:
$('table tr td:first-child').not('.ignoreMe').css({width:100});
For your example you can use :not([colspan]) which ignores the any td with colspan defined. Something like this:
table tr td:first-child:not([colspan]){
width:100px;
}