Hovering child element of an even element using CSS - html

I need to set hover of 'a' element that is a child of 'tr', which is picked by nth-child(even) selector.
Basically I've got the normal table with multiple rows, and inside every table cell there is an 'a' link, that I want to highlight while hovered, but only in the even rows.
My CSS code:
.table-striped tr:nth-child(even) td a:hover {
color: #3c3c3c;
}
And it's not working.
How can I solve this?
.table-striped tr:nth-child(even) td a:hover {
color: Red;
}
<table class="table-striped">
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
</table>


The css you are using is working perfectly:
.table-striped tr:nth-child(even) td a:hover {
color: #3c3c3c;
color:red;/*for dislay i have use this red color;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
</table>


Try this one:
.table-striped tr:nth-child(even):hover td a {
color: #3c3c3c;
}

Related

padding between table components not working

I have a table.
<table style="margin-left: 20px" class="tg">
<tbody>
<tr>
<td class="tg- 0lax">Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>
I want the margin between the question 1 and the answer 1 2px. And the margin between the answer 1 and question 2 , 10 px. I cant get i done. I did try the following things: style="margin-bottom / margin-top in the and , al well as padding 2px. But both doesnt work

<td></td> and <tr></tr> cant be given a margin. Although you can give them a padding when you set display: block; Then you can go on an set things like every second one should get a bigger padding at the bottom (as you wanted it). Here is a snippet with very basic styles:
tr {
display: block;
}
tr:nth-child(even) {
padding-bottom: 20px;
}
tr:nth-child(odd) {
padding-bottom: 2px;
}
<table>
<tbody>
<tr>
<td>Question 1</td>
</tr>
<tr>
<td>Answer 1</td>
</tr>
<tr>
<td>Question 2</td>
</tr>
<tr>
<td>Answer 2</td>
</tr>
</tbody>
</table>

Set border-spacing property 2px to the table, and then skip 5 rows to get 10px something like this:
<table style="margin-left: 20px;border-spacing: 2px;" class="tg">
<tbody>
<tr>
<td class="tg- 0lax" >Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>

Table with cells left aligned and extra space on the right

I would like to have the cells of my table left aligned but at the same time autofit.
Example:
thead td {
background-color: yellow;
}
td {
border:1px solid #000;
}
<br/>
<p>
First table
</p>
<br/>
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column with some additional text (blah blah blah blah blah)</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
<br/>
<p>
Second table
</p>
<br/>
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
on the second table we clearly see that each cells are equal width.
This is not what I wanted.
I want to have each cells side by side without extra space between.
Extra space should be on the right.
Edit: an image of what I want:

Edit: if you don't want multilines in column use
white-space:nowrap; in `td` css
use :nth-last-child in your CSS to make it 100% in width
thead td {
background-color: yellow;
}
td {
border:1px solid #000;
}
thead td:nth-last-child(1){
width:100%;
}
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column </td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>

try it help full
thead td {
background-color: yellow;
}
td {
border:1px solid #000;
}
thead td:last-child{
width:100%;
}
<br/>
<p>
First table
</p>
<br/>
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column with some additional text (blah blah blah blah blah)</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
<br/>
<p>
Second table
</p>
<br/>
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
i have add some css
thead td:last-child{
width:100%;
}

Do you mean something like that?
<table style="width: 100%;">
<thead>
<tr>
<td style="width: 150px;">Title 1</td>
<td style="width: 150px;">Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>

Make two cells in same row of 2 tables have same width

I have 2 tables in same row of the big table, like this:
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Type A</td>
</tr>
<tr>
<td>Type B</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>10%</td>
</tr>
<tr>
<td>90%</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>40%</td>
</tr>
<tr>
<td>60%</td>
</tr>
</table>
</td>
</tr>
<table>
But when the text in first column (e.g. "Type A") is too long, it makes a new line. Then data in same row is not in same row. ("Type B" is not in same row with "90%" and "60%")
Return data is in xml format, like this:
<DataGroup Storage="Storage 1">
<DataRow Type="Type A" Percentage="10%"/>
<DataRow Type="Type B" Percentage="90%"/>
</DataGroup>
<DataGroup Storage="Storage 2">
<DataRow Type="Type A" Percentage="40%"/>
<DataRow Type="Type B" Percentage="60%"/>
</DataGroup>
I have to draw borders to make it look like one table. Render in cshtml file.
How can I resolve this? Many thanks.

You can add the border: 1px solid black; to CSS to make it like a table. For HTML, you just need one table.
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>Type A
<br>new line</td>
<td>10%</td>
<td>40%</td>
</tr>
<tr>
<td>Type B</td>
<td>90%</td>
<td>60%</td>
</tr>
</table>

You can stop word-wrap with white-space: nowrap; although it stops honoring the width element.
tr td:nth-child(1){
width:20px;
color:red;
white-space: nowrap;
}
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>Type A</td>
<td>10%</td>
<td>40%</td>
</tr>
<tr>
<td>Type B</td>
<td>90%</td>
<td>60%</td>
</tr>
<table>

I'm assuming, you have a good reason for having tables within table. Then your problem is your semantics. You are not outputting the 'Type B', '90%' and '60%' on the same rows of the big table. Your sub-tables can either be aligned by vertical-align as blocks or you need to rework your big table semantics to something like this.
<table class="big">
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>
<table class="small">
<tr>
<td>Type A Lorem ipsum</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>10%</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>40%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="small">
<tr>
<td>Type B</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>90%</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>60%</td>
</tr>
</table>
</td>
</tr>
<table>

Highlight whole row regardless rowpsan - css

I have the code below:
tbody > tr:hover{
background-color: lightgrey;
cursor: pointer;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
How can I highlight the whole row when I hover to the row.
For example, when I hover to January, it should highlight the whole January row instead of highlight only the half one because of the rowspan attribute.

Move the styling to the td under the hovered tr. In addition, highlight the sibling row, when the 1st row is hovered. The only caveat is that if the 2nd tr is hovered, it won't highlight the 1st cell.
tr:hover > td {
background-color: lightgrey;
cursor: pointer;
}
tr:nth-child(2n + 1):hover + tr {
background-color: lightgrey;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td>$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td>$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>

tr:hover td:not([rowspan]) {background: red;}
tr:hover td[rowspan]:hover ~ td {background: none;}
tr:hover td[rowspan]:hover {background: yellow;}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>

Table in HTML with 2 columns; first column is 7 rows, second column is 1 row

I'm trying to create a table in HTML. 7 rows in the first column, only 1 in the second. I can't figure it out. I feel like I am missing something simple.

You can simply put a second td element in the first row, and change its rowspan to 7
<table border="1" style="width:100%">
<tr>
<td>a</td>
<td rowspan="7">b</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>a</td>
</tr>
</table>

You can use the rowspan attribute to have a cell span multiple rows.
Code:
<html>
<body>
<table>
<tr>
<td>Row 1</td>
<td rowspan="7">Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
</tr>
</table>
</body>
</html>

You want to use the rowspan attribute to stretch the second column over the rows of the first column, as shown below.
Reference: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6.1
td {
border: 1px solid gray;
}
<table>
<tr>
<td>C 1</td>
<td rowspan="7">C 2</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
<tr>
<td>C 1</td>
</tr>
</table>