I'm having a problem in :hover.
I want to make the last tr of that tbody also change color when its tbody is hovered. The problem is the last tr has its own class.
Here is the structure of my code:
.cust-table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
.cust-table td {
border: 1px solid black;
padding: 10px;
}
.cust-table tbody:nth-child(even){
background-color: white;
}
.cust-table tbody:nth-child(odd){
background-color: green;
}
.cust-color {
background-color: blue;
}
.cust-table tbody:hover {
background-color: yellow;
}
<table class="cust-table">
<tbody>
<tr>
<td rowspan="2">A</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">B</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">C</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
</table>
I tried adding cust-color:hover but as expected, it only works when the <tr> with cust-color is hovered.
Use this rule to set the custom color only if the tbody is not hovered:
tbody:not(:hover) .cust-color {
background-color: blue;
}
.cust-table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
.cust-table td {
border: 1px solid black;
padding: 10px;
}
.cust-table tbody:nth-child(even){
background-color: white;
}
.cust-table tbody:nth-child(odd){
background-color: green;
}
tbody:not(:hover) .cust-color {
background-color: blue;
}
.cust-table tbody:hover {
background-color: yellow;
}
<table class="cust-table">
<tbody>
<tr>
<td rowspan="2">A</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">B</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">C</td>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="cust-color">
<td colspan="3">Cust color</td>
</tr>
</tbody>
</table>
Ori Drori's answer is probably the best, but here is an alternative solution:
.cust-table tbody:hover, .cust-table tbody:hover tr.cust-color {
background-color: yellow;
}
Overrides the tr color when its parent tbody is hovered.
Add a rule for that specific tr:
.cust-table tbody:hover,
.cust-table tbody:hover .cust-color{
background-color: yellow;
}
Related
I have a table that looks like this:
$(document).ready(function() {
$('.band tr.highlight').next('tr').each(function() {
$(this).addClass('transparent');
});
});
table {
border-collapse: collapse;
}
th {
text-align: left;
color: white;
padding: .5rem;
}
th:nth-child(odd) {
background-color: darkgray;
}
th:nth-child(even) {
background-color: green;
}
tr.highlight {
background-color: red;
color: white;
}
.band tr:nth-child(even):not(.highlight) td {
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="band">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr class="highlight">
<td colspan="3">section 2</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr class="highlight">
<td colspan="3">section 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
</tbody>
</table>
The issue is that I would like the first row of each section to be transparent. Then alternate color/transparent for the remaining rows in the section. I added a "transparent" class to the row 's after the section row, but I am not sure how to start a loop or the like on the remaining rows. How can I add to the script (css solutions are great too) to handle the remaining rows?
This is my solution, I first added the transparent class to the first row after highlight class, then use the nextUntil method to loop through the next rows until another highlight, I added the class gray for the other rows, and this is the demo:
$(document).ready(function() {
$('.band tr.highlight').next('tr').each(function() {
$(this).addClass('transparent');
var i = 1;
$(this).nextUntil('.highlight').each(function() {
if (i % 2 === 0) {
$(this).addClass('transparent');
} else {
$(this).addClass('gray');
}
i++;
});
});
});
table {
border-collapse: collapse;
}
th {
text-align: left;
color: white;
padding: .5rem;
}
th:nth-child(odd) {
background-color: darkgray;
}
th:nth-child(even) {
background-color: green;
}
tr.highlight {
background-color: red;
color: white;
}
.band tr:nth-child(even):not(.highlight), .band tr.gray{
background-color: gray;
}
.band tr.transparent {
background-color: transparent !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="band">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr class="highlight">
<td colspan="3">section 2</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr class="highlight">
<td colspan="3">section 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
<tr>
<td>info 1</td>
<td>info 2</td>
<td>info 3</td>
</tr>
</tbody>
</table>
In the HTML table, I am trying to apply border-radius on the column group but it is not working. Is there any way to fix this?
I have to implement accessibility on table view due to which I couldn't opt for other alternative solutions.
How can I apply the border-radius on the column group?
table{
border-collapse: collapse;
border-spacing: 30px;
}
td {
padding: 5px;
}
colgroup > col.selected{
border: 1.5px solid #2698d6;
box-shadow: 0px 4px 31px rgba(96, 96, 96, 0.1);
border-radius: 8px;
}
<table>
<colgroup>
<col span="1" class="selected" />
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</table>
you can apply for td like below,
table {
border-collapse: separate;
border-spacing: 0 16px;
}
tr td {
border: 1px solid transparent;
transition: all ease 0.3s;
padding: 5px;
}
td {
border-radius: 10px;
}
td:hover
{
border: 1px solid green;
}
<body>
<table>
<tbody>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>
please comment if any query
I'm helping with an interactive table in a dashboard. Clicking rows in the table alters the data displayed on the rest of the dashboard. The table rows can have a 'selected' class, where the selected row is given a 4px bold border. The rows also have a :hover selector that gives them a 2px border.
My issue is that when using Mozilla Firefox V 56.0.1 this causes the rows between the row being hovered over and the selected row to be given a 4px border on the left and right sides of the row. See below for details.
Unintended behavior
Intended behavior
Here is the code:
HTML and CSS in CodePen
https://codepen.io/anon/pen/MOzJNZ
table {
border-collapse: collapse;
}
tr.notselected:hover {
border: 2px solid black;
padding: 2px;
}
tr.selected {
border: 4px solid black; }
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td>7.9</td>
<td>7.9</td>
<td></td>
<td></td>
</tr><tr class="notselected">
<td>Row 4</td>
<td></td>
<td></td>
<td>9.2</td>
<td>8.4</td>
</tr>
<tr class="notselected">
<td>Row 5</td>
<td>12.2</td>
<td>11.9</td>
<td>7.3</td>
<td>9.0</td>
</tr>
</table>
Added following class in order to fix firefox issue:
tr.notselected {
border: 0px solid black;
}
table {
border-collapse: collapse;
}
tr.notselected:hover {
border: 2px solid black;
padding: 2px;
}
tr.selected {
border: 4px solid black;
}
tr.notselected:hover td {
padding-bottom: 6px; }
tr.notselected {
border: 0px solid black;
}
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td>7.9</td>
<td>7.9</td>
<td></td>
<td></td>
</tr><tr class="notselected">
<td>Row 4</td>
<td></td>
<td></td>
<td>9.2</td>
<td>8.4</td>
</tr>
<tr class="notselected">
<td>Row 5</td>
<td>12.2</td>
<td>11.9</td>
<td>7.3</td>
<td>9.0</td>
</tr>
</table>
How can I do the following table in html?
|Cell1|Cell2|Cell3|
-------------------
|Cell1| Cell2 & 3 |
-------------------
|Cell1|Cell2|Cell3|
-------------------
| Cell1 & 2 |Cell3|
| Cell1 & 2 |Cell3|
-------------------
The last is merge two row and two column.
Appreciate your help people without using CSS.
Table has 5 rows and 3 columns.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2 & 3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">1 & 2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">1 & 2</td>
<td>3</td>
</tr>
</table>
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td>January</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>January</td>
<td colspan="2">$50</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td rowspan="2" colspan="2">January</td>
<td>$50</td>
</tr>
<tr>
<td>$50</td>
</tr>
</table>
You can use colspan and rowspan for this thing.
Colspan allows a single table cell to span the width of more than one cell or column.
Rowspan allows a single table cell to span the height of more than one cell or row.
Read more: https://html.com/tables/rowspan-colspan/#ixzz4v5ntM7rn
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2 & 3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2" colspan="2">1 & 2</td>
<td >3</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Use colspan on <td> tag.
<table>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td colspan="2">Col 2 + Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<table>
https://codepen.io/Toilal/pen/BwxdMg
tr:nth-child(1), tr:nth-child(3), tr:nth-child(5){
font-weight: bold;
font-size: 15pt;
}
tr:nth-child(2){
font-weight: bold;
font-size: 14pt;
}
td:nth-child(1){
border-left: 2px solid black;
border-right: 2px solid black;
}
td:nth-child(2){
border-right: 2px solid black;
}
td:nth-child(3){
border-right: 2px solid black;
}
tr:nth-child(4) > td:nth-child(1), tr:nth-child(4) > td:nth-child(2){
border-left: none;
border-right: 1px solid black;
}
<table>
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td>Cell3</td>
</tr>
<tr>
<td>Cell1</td>
<td colspan="2">Cell2 & 3</td>
</tr>
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td>Cell3</td>
</tr>
<tr>
<td colspan="2">Cell1 & 2</td>
<td>Cell3</td>
</tr>
<tr>
<td colspan="2">Cell1 & 2</td>
<td>Cell3</td>
</tr>
</table>
I have table with td rowspan and has 3 rows so how can I make those rows with no border while keeping the main one with border?
here is the table..
I want to make it look like this, I have edited this with paint just erased the lines.
here is the jsfiddle demo
here is my html code
<table id="Table">
<thead>
<tr>
<th>Track</th><th>Car</th>
<th></th>
<th>Score</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">LIST 1</td>
<td>Name 1</td>
<td>LT</td>
<td>59,800</td>
<td>8 days ago</td>
</tr>
<tr>
<td>Name 2</td>
<td>TR</td>
<td>58,000</td>
<td>10 days ago</td>
</tr>
<tr>
<td>Name 3</td>
<td>SO</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 2</td>
<td>Name 4</td>
<td>NL</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 3</td>
<td>Name 5</td>
<td>NR</td>
<td>59,000</td>
<td>9 days ago</td>
</tr>
<tr>
<td>LIST 4</td>
<td>Name 6</td>
<td>FI</td>
<td>57,000</td>
<td>10 days ago</td>
</tr>
</tbody>
</table>
and css
#Table {
table-layout:fixed;
width: 400px;
text-align: left;
border-collapse:collapse;
}
#Table th {
background: #F9F9F9;
border-bottom: solid 1px black;
padding-top: 3px;
padding-bottom: 4px;
}
#Table td {
background: #F9F9F9;
border-bottom: 1px solid black;
padding-top: 3px;
padding-bottom: 4px;
}
#Table th:nth-child(1) { width:180px; }
#Table th:nth-child(2) { width:200px; }
#Table th:nth-child(3) { width:30px; }
#Table th:nth-child(4) { width:80px; }
#Table th:nth-child(5) { width:120px; }
A better solution would be to move the border-bottom style to the <tr> (instead of <td>) and to use a custom class to specify if your <tr> needs border or not.
See you updated jsfiddle.
CSS added/modified :
/* modified */
#Table td {
/*border-bottom: 1px solid #cccccc;*/
padding-top: 3px;
padding-bottom: 4px;
}
/*added*/
#Table tr{
border-bottom: 1px solid #CCC;
}
#Table tr.no-border-row {
border-bottom: none;
}
HTML:
<table id="Table">
<thead>
<tr>
<th>Track</th>
<th>Car</th>
<th></th>
<th>Score</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="no-border-row">
<td rowspan="3">LIST 1</td>
<td>Name 1</td>
<td>LT</td>
<td>59,800</td>
<td>8 days ago</td>
</tr>
<tr class="no-border-row">
<td>Name 2</td>
<td>TR</td>
<td>58,000</td>
<td>10 days ago</td>
</tr>
<tr>
<td>Name 3</td>
<td>SO</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 2</td>
<td>Name 4</td>
<td>NL</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 3</td>
<td>Name 5</td>
<td>NR</td>
<td>59,000</td>
<td>6 days ago</td>
</tr>
<tr>
<td>LIST 4</td>
<td>Name 6</td>
<td>FI</td>
<td>57,000</td>
<td>1 month ago</td>
</tr>
</tbody>
</table>
Add this to your CSS:
#Table tbody tr:nth-child(1) td:not(:first-child) { border-bottom: none; }
#Table tbody tr:nth-child(2) td { border-bottom: none; }
Example: http://jsfiddle.net/uerdg8gm/1/