CSS use not for TH hover in table TR - html

In table I'm using this below CSS for highlight trs and I want to use :not for th
HTML:
<table>
<thead>
<th></th>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
CSS:
table tr:hover {
background-color:#fff;
}
table th:hover {
background-color:none !important;
}


Scope the selector to the tbody, not the thead.
tbody tr:hover {
background-color:#fff;
}
tbody th:hover {
background-color:none !important;
}
HTML:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
http://jsfiddle.net/3bpZX/1/

Related

CSS selector for direct table `th` element without child table's `th` element - is possible

How to select the th element of table without selecting it's child th? is it possible? is there any selector like so?
here is the demo:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
thead:first-of-type th {
background-color: gray;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
When i add the gray background it added with tables child elements of the too. is there any direct selector to only select the parent level th element?
Thanks in advance.

You need to add one class to the main table. Try this code
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
.parent-table>thead:first-of-type th {
background-color: gray;
}
<table class="parent-table">
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>

You can try this:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
table > thead:first-of-type > tr > th {
background-color: gray;
}
table > tbody > tr td table > thead:first-of-type > tr > th{
background-color: white;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>

selecting first td from all rows using css selector

Here is my html
<table id="mytable" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr >
<td>1888</td>
<td>Michael</td>
</tr>
<tr>
<td>1886</td>
<td>Bosco</td>
</tr>
<tr>
<td>955</td>
<td>Raj</td>
</tr>
</tbody>
</table>
i want to select first td from all rows
So output will be 1888, 1886, 955
I tried this table[id='mytable'] tr:nth-child
but it throws error.
Can someone help?

To achieve what you want you need to change the selector you're using to: table[id='mytable'] tr td:first-child. This will select the first td in every tr in the table with the ID mytable
The code in the snippet is just an example of how to apply it
$(document).ready(function() {
$("table[id='mytable'] tr td:first-child").css({'background-color':'pink'});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr >
<td>1888</td>
<td>Michael</td>
</tr>
<tr>
<td>1886</td>
<td>Bosco</td>
</tr>
<tr>
<td>955</td>
<td>Raj</td>
</tr>
</tbody>
</table>
Hope this helps!

You should use first-child selector on td elements:
#mytable td:first-child {
background: red;
}

CSS - Select table with thead that has specifc class

i have a table as follows
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr></tbody></table>
i want to apply borders to to table whose thead class is info
css currently contains
.bordered td{
border: 1px solid #0060a0 !important;
}

You can do this using a sibling selector
.bordered thead.info + tbody td
This selector targets all td elements within a tbody element which is an adjacent sibling to a thead.info element within a .bordered table. That sounds confusing, so here's a demo:
.bordered thead.info + tbody td {
border: 1px solid #0060a0;
}
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
A slightly more robust solution, which would be required if the table contained a tfoot element would be to use the more general sibling selector.
.bordered thead.info ~ tbody td {
border: 1px solid #0060a0;
}
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>

How to style a table with only partly border spacing?

I want to create a table with only partly separated borders. The borders above and below the thead should be without spaces in between. But others in it should be separated by a small space.
Unfortunately, the border-spacing style only applies to the whole table: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
For example, in the following I want to have space only between the border-top of h2.1 and h2.2. Is that possible?
HTML:
<table>
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: separate;
}
th,
td {
vertical-align: top;
}
thead tr:first-child th {
border-top: 2px solid;
}
thead tr:not(:first-child) th {
border-top: 1px solid;
}
tbody tr:first-child td {
border-top: 1px solid;
}
tbody tr {
border-top: 1px solid;
}
Fiddle: https://jsfiddle.net/6ov4hadd/
Edit
Here is a more sensible example.
Fiddle: https://jsfiddle.net/Lnk929q4/
I want to look it like a "book table":

You can try using two different tables for head part and body part. Something like this
https://jsfiddle.net/6ov4hadd/1/
<table id = "table1">
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>

css border not showing but css is applied

I'm trying to apply a border to all tr's in a thead.
Css(stylus):
table
thead
tr
border: solid #000;
border-width: 0 10px;
According to chrome the styles get applied, but the border doesn't actually show up:

tr need its table to have border-collapse: collapse for border to work
table.first {
border-collapse: separate; /* property default */
}
table.second {
border-collapse: collapse;
}
table thead tr {
border-bottom: 2px solid gray;
}
/* for this demo only */
div {
margin: 25px 20px 10px;
text-decoration: underline;
}
<div>This table's tr (in thead) has no border</div>
<table class="first">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
<div>This table's tr (in thead) has border</div>
<table class="second">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

i'm not a css master but i usually write border properties in one line:
border: 10px solid #000;