Maybe somewhat like this question, but example in accepted seems not working.
I want to show here, Action button, on hovering the row. So when I hover to particular table row, so only that row's action button should be displayed and all others should be hidden.
So how can I achieve this? Is jQuery required or is it possible through Pure CSS?
<table class="table">
<thead>
<tr>
<th>Instance Id</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
</tbody>
</table>
It is pretty straight-forward and can be done with CSS.
You want a hover on the <tr> element (i.e. tr:hover) to change the display property of a descendant (i.e. .action). So the selector to use would be tr:hover .action.
Here's the working snippet:
.action {
display: none;
}
tr:hover .action {
display: inline;
}
<table class="table">
<thead>
<tr>
<th>Instance Id</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
</tbody>
</table>
You can read more about the descendant selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
Found the solution Pure CSS:
.table tbody tr td a{
display: none;
}
.table tbody tr:hover > td a{
display: block;
}
Related
make font-weight:bold if table tbody tr td value greater than 0 without loop using javascript or jquery
Selector is
$(table tbody tr td)
without $.each
HTML Sample
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>
If you need a Jquery, make
$('table td').attr('style','font-weight:bold;');
Without looping, and since values get set client side, you could combine the CSS attr(), a pseudo element like ::after and an attribute selector.
When your client side routine set a value, it does so to the attribute data-value="" instead of inside the element itself, and when done like that, you can use this CSS to style the cells
table td {
background: #eee;
}
table td::after {
content: attr(data-value);
padding: 10px;
}
table td[data-value="0"] {
color: green;
}
table td:not([data-value="0"]) {
color: white;
background: green;
}
<table id="example">
<tr>
<td data-value="0"></td>
<td data-value="1"></td>
<td data-value="2"></td>
</tr>
</table>
<table id="myTable">
<tr>
<td data-value="1"></td>
<td data-value="0"></td>
<td data-value="3"></td>
</tr>
</table>
You can use the :empty css selector like this :
#example td{
background-color: magenta;
color: #FFF;
}
#example td:not(:empty){
background: blue;
}
#myTable td:not(:empty){
font-weight: bold;
}
<table id="example">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
<table id="myTable">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
You can use .text() for retrieve the value and then passing a function that checks the value, returning it in bold in case of greater than 0.
I think it is the only way to do it without adding extra attributes to the HTML you provide us.
Check this snippet.
tds = $('table tr td').text(function(index, text){
return text > 0 ? $(this).css({"font-weight": "bold"}).text() : text;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>
Finally, the solution is to use JQuery selector :contains() to get cell text
$('table td:contains("0")').attr('style','font-weight:bold');
$('table td:contains("test")').attr('style','background-color:yellow');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border=1 width=200 value=9>
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>3</td>
<td>test</td>
</tr>
</table>
You can make the table cell bold by using this CSS:
table tbody tr td {
font-weight: bold;
}
That will apply an bold effect to text in the table cells. If there's no table cells to show then it'll skip the CSS rule.
I have a table and the last should show additional on click. Everything works fine, but I need a transition (after click the table should expand smoothly).
My test table:
<div ng-app="app">
<table>
<thead ng-controller="TestController">
<tr>
<th>
head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first
</td>
</tr>
<tr>
<td>
second
</td>
</tr>
<tr ng-show="display">
<td>
third
</td>
</tr>
<tr ng-show="display">
<td>
fourth
</td>
</tr>
<tr ng-show="display">
<td>
fifth
</td>
</tr>
<tr ng-click="display = !display" class="last-color">
<td>
click me
</td>
</tr>
</tbody>
</table>
</div>
CSS:
table {
border: solid 1px;
}
td {
border: solid 2px;
}
.last-color td {
background-color: green;
}
tbody {
transition: height 2s;
}
My example on JSFiddle
First of all, CSS3 transitions allow you to change property values smoothly (from one value to another), over a given duration. In other words, in order to see a transition working, you should specify both values in your CSS explicitly.
More over, you cannot apply height transitions to table elements (<table>, <tbody>, <tr>, <td>, etc.). However, if you can wrap the contents with <div> elements, you can apply CSS transitions to the <div> elements.
Just for example: https://jsfiddle.net/r4w1u5or/3/
this is my code.i'm hover first tr in table previous class background colors will not change in first two td in first tr.but only when i'll hover first tr must change 1st two td background color will change,where i'm missing some code.it's possible only in css
.cls{
background-color:red;
}
[data-class*="weeks"]:hover{
background-color:blue;
}
<table border="1px">
<thead>
<tr>
<th>row1</th><th>row2</th><th>row3</th><th>row4</th><th>row5</th>
</tr>
</thead>
<tbody>
<tr data-class="weeks">
<td class="cls">1</td><td class="cls">2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr data-class="weeks">
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</tbody>
</table>
use
like this
.cls{
background-color:red;
}
[data-class*="weeks"]:hover td{
background-color:blue;
}
<table border="1px">
<thead>
<tr>
<th>row1</th><th>row2</th><th>row3</th><th>row4</th><th>row5</th>
</tr>
</thead>
<tbody>
<tr data-class="weeks">
<td class="cls">1</td><td class="cls">2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr data-class="weeks">
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</tbody>
</table>
The problem is that you've specified background colors for your <td> tags in your .cls block. When you change the <tr>'s background color on hover the <td>s don't lose their own styles, and they'll always be sitting "on top" of the <tr>'s background, so to speak. To fix this, specifically selectd the <td> children of the <tr> being hovered over, e.g.:
.cls{
background-color:red;
}
[data-class*="weeks"]:hover td {
background-color:blue;
}
<table border="1px">
<thead>
<tr>
<th>row1</th><th>row2</th><th>row3</th><th>row4</th><th>row5</th>
</tr>
</thead>
<tbody>
<tr data-class="weeks">
<td class="cls">1</td><td class="cls">2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr data-class="weeks">
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</tbody>
</table>
Try to change the style:
.cls {
background-color:red;
}
[data-class*="weeks"]:hover .cls, [data-class*="weeks"]:hover {
background-color:blue;
}
I have the following table that pull out from database within loop.
I would like to drag and drop the following rows.
The rowspan of "Sort" button column is dynamic. (It will be the count of rows).
My problem is when I drag the row to sort, I don't want to include "Sort" button column.
After I drag the first row, "Sort" button column has been moved with the dragged row as the following.
Thanks
Poor Semantics
The main problem here is that your save button is part of your table. Why? The table element is used to represent tabular data, and a button isn't tabular data.
You'd avoid this problem completely if your HTML was more accurately semantic:
<!-- Section A -->
<section>
<table>
...
</table>
<button>Save</button>
</section>
With this, you'd be able to drag rows and not worry about your button being included in the drag at all. You'd have a separate section element wrapping each of your related section tables, and the button is standalone.
Using CSS we can style the button to be where we want it in relation to the table. A first step being to set the table to display: inline-table to allow the button to sit beside it.
Demo
section {
margin-bottom: 20px;
}
table {
display: inline-table;
vertical-align: top;
}
th, td {
text-align: left;
}
button {
vertical-align: bottom;
}
<section>
<table>
<thead>
<tr>
<th colspan="3">Section A</th>
</tr>
<tr>
<th>Name</th>
<th>Section</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>13</td>
<td>SG</td>
</tr>
<tr>
<td>BB</td>
<td>16</td>
<td>JP</td>
</tr>
</tbody>
</table>
<button>Save</button>
</section>
<section>
<table>
<thead>
<tr>
<th colspan="3">Section B</th>
</tr>
<tr>
<th>Name</th>
<th>Section</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>13</td>
<td>SG</td>
</tr>
<tr>
<td>BB</td>
<td>16</td>
<td>JP</td>
</tr>
</tbody>
</table>
<button>Save</button>
</section>
I have created the following table in html. I want to apply a style to table body elements in column which i have added a css class. But the style should not apply to header column. only to body column.
Here for a example i have add CSS class called "body-right". The result what i want is all the table body elements in column "Value" should "right align" except header column. How to achieve this in css.
Thanks a lot.
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
Use this:
tbody td:nth-of-type(3) {
text-align: right;
}
Example
table {
border-spacing: 0;
border-collapse: collapse;
font: 14px verdana;
}
td {
padding: 0.2em;
border: 1px solid gray;
}
tbody td:nth-of-type(3) {
text-align: right;
background: yellow;
width: 4em;
}
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
You can acheive this by specifying inline style for the header section seperately.
or make a little change in the css
like
thead .body-right { text-align:right; }