In a table, upon hovering on one td cell, I want to highlight multiple td cells in the same row.
What I have currently is to use classes on each td like this:
<tr>
<td>v1_a</td>
<td class='c1'>v1_b1</td>
<td class='c1'>v1_b2</td>
<td class='c2'>v1_c1</td>
<td class='c2'>v1_c2</td>
</tr>
and have CSS like this:
tbody td.c1:hover,
tbody td.c1:hover ~ .c1,
tbody td.c2:hover,
tbody td.c2:hover ~ .c2 {
background-color: #CCffff;
}
then I can partially achieve what I want: JSFiddle
However, it is not exactly what I want. It highlights both col_b1 and col_b2 when I hover on col_b1, but not when I hover on col_b2. I want to highlight both of these columns whenever the pointer is on one of the cells.
Is there a simple solution ideally using only CSS?
Please use javascript to achieve.
I added an attribute as same-group elements identification to make it more sustainable.
$('.highlight').on('mouseover', function() {
$('.highlight').removeClass('hover');
$('.highlight[data-cell="'+$(this).data('cell')+'"]').addClass('hover');
});
td {
border: 1px solid;
}
.hover {
background-color: #ff0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>v1_a</td>
<td class="highlight" data-cell="c1">c1</td>
<td class="highlight" data-cell="c1">c1</td>
<td class="highlight" data-cell="c2">c2</td>
<td class="highlight" data-cell="c2">c2</td>
</tr>
<tr>
<td>v1_a</td>
<td class="highlight" data-cell="c3">c3</td>
<td class="highlight" data-cell="c3">c3</td>
<td class="highlight" data-cell="c4">c4</td>
<td class="highlight" data-cell="c4">c4</td>
</tr>
</table>
If you want to highlight full row, when hovering over any of the cell. Then write
tr:hover {background-color: #f5f5f5;}
in css file.
If you are not using css file and writing all the styling in html file theln write in head
<style>
tr:hover {background-color: #f5f5f5;}
</style>
I hope this will be helpful for you.
Related
<table>
<tbody>
<tr class="positive">
<td class="happy">12</td>
<td class="happy">7</td>
<td class="happy">69</td>
</tr>
</tbody>
</table>
▲ this is the origin html code.
td.happy(#>10) {color:red;}
td.happy(#>50) {color:blue;}
▲ this is the css code what i want. (Imagine)
i'd like to apply CSS style when the number greater than specific number(10, 50)
i'v tried Java-script, and it worked, but i want to make the website only with html and CSS as possible.
Is there any way to select the text's number, which is in the tag?
You can't with pure css,you must help of jquery:
$(document).ready(function(){
$('tr.positive td.happy').each(function(){
number = parseFloat($(this).text());
if(number > 10)
$(this).addClass('greater10');
if(number > 50)
$(this).addClass('greater50');
})
})
td {
border: 1px solid #000;
}
.greater10 {
color: red;
}
.greater50 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="positive">
<td class="happy">12</td>
<td class="happy">7</td>
<td class="happy">69</td>
</tr>
</tbody>
</table>
If you read the specification, no.
You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. The only control you can do is if a tag is empty.
Not from css, if you are trying to avoid a whole new js page then maybe consider embedding the js in your HTML.
http://codepen.io/louisverdiguel/pen/vCJFh
this is my first time here i hope i am doing it right.
html
I have created a string of rows and columns with html for a client to "resemble" a spreadsheet.
CSS
I have created a css class class="sale td"
within the class .
.sale td {border: 1px solid grey; }
to have a border show for each row
issue: i would like to remove the border from any <tr> that contains a <h2> tag
how would i go about creating such a specific class or action with the CSS and what is this method called?
You can try like this: LINK
CSS:
.sale tr.no_border td {
border: 0px !important;
}
HTML:
<tr class="no_border">
<td colspan="3" align="left" valign="top"><h2>Bottles</h2></td>
</tr>
You can only try to add style tag to each row, for which you want to remove the border.
For example:
<td colspan="4" align="left" valign="top" style="border:none;">
You can't go backwards like that setting styles for a tag based on tags inside it. You have to mark the tr/td with a class if it contains a h2 in order to do this.
Edit:
An example.
CSS
.noborder {border:none !important}
"!important" ensures it overrides the other CSS style.
HTML
<td class="noborder">
Edit2:
Also ".sale td" in your CSS means any <td> inside a block (table in this case) with a class of "sale". So you don't set a class of "sale td" on your <table> - but just "sale"
For every row you can use this css:
.sale td {border: 1px solid grey; }
but for the rows with <h2> in it:
.sale tr.no-border td {
border: 0px !important;
}
and your html will look like:
<tr class="no-border">
<td colspan="3" align="left" valign="top"><h2>Heading</h2></td>
</tr>
I have a table whose second row ,first column contains another table. I want to set a background color to the parent table rows but it should not be applied to child table rows. For that I am trying use CSS Child-selector (>).But its not working ...Can anybody tel me the reason.
Here is my piece of code:
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<style>
table.tab > tr{
background:red;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<td>asdf</td><td>afda</td><td>asdfdsa</td>
</tr>
<tr>
<td colspan="3">
<table>
<tr>
<td>afds</td><td>Trkaladf</td><td>inner Tab</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I think some browsers like to auto-render a tbody element nested between table and tr which will cause your direct-child selector to not work.
table.tab > tbody > tr, table.tab > tr{
background:red;
}
http://jsfiddle.net/vppXL/
However, if this content is for layout and not tabular data, you should not be using a table element.
Best thing to do is set your <thead> and <tbody> sections yourself, like so:
<table class="tab">
<thead>
<tr>
<td>asdf</td>
<td>afda</td>
<td>asdfdsa</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<table>
<tr>
<td>afds</td>
<td>Trkaladf</td>
<td>inner Tab</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Then you can choose set your markup to target rows in your tbody, but not thead:
table.tab tbody {
background: red;
}
However, it's better to set your background-color on your <td> elements instead with:
table.tab > tbody > tr > td {
background: red;
}
There's a jsFiddle example here.
table.tab > tbody > tr indeed gives the style to only the first row.
If you take a look at the DOM with firebug, you can confirm it. The first row of the child table doesn't get styled the same way.
However, since your child table is inside a table row that has a red background, and the child table has no background specified, the child table will have no background - and thus you still see the red background "through" the child table.
Possible solution - styling the child table as well with a different background:
table.tab > tbody > tr {
background:red;
}
table.tab table > tbody > tr{
background:white;
}
Is there a way to put some CSS into the BODY part of my html page without using inline CSS?
e.g.: I want to make all elements of one table red. Downside here: need same style=".." for every TD.
<table>
<tr>
<td style="background-color:#f00">RED</td>
<td style="background-color:#f00">RED</td>
</tr>
</table>
If you want all 'td' elements of one specific table with a specific css style, you should use this code:
html:
<table id="tableOne">
<tr>
<td>red background</td>
<td>red background</td>
</tr>
</table>
<table>
<tr>
<td>blank background</td>
<td>blank background</td>
</tr>
</table>
css:
#tableOne td{
background-color: #FF0000;
}
<table class="myClass">
<tr>
<td>RED</td>
<td>RED</td>
</tr>
</table>
And your css class myClass:
.myClass td
{
background: #F00;
}
To keep all the code within the body you could use javascript to first find all TD's then apply the background color:
<script>
var cells = document.getElementsByTagName("td");
for (var i=0; i<cells.length; i++) {
cells[i].style.backgroundColor = '#c0c0c0';
}
</script>
In an embedded or external style sheet:
td { background: #F00; }
That's all.
The DITA Open Toolkit automatically inflicts some inline table attributes when one publishes to HTML, including frame="border" and rules="all".
I need to override this "rules" attribute using CSS styles for cells, and while I can get the desired result in IE and Chrome, Firefox puts solid black gridlines in the table and refuses to budge on the matter.
Obviously I can't edit the HTML, company policy is to not edit the XSLT, so how can I remove these gridlines using CSS alone?
I've tried various cunning combinations of border-xxxxxx styles and given them !important declarations to no effect.
The HTML says...
<table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all">
<thead>
<tr>
<th class="cellrowborder">Type </th>
<th class="cellrowborder">Comment </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder">Caution </td>
<td class="cellrowborder">Think twice. </td>
</tr>
<tr>
<td class="cellrowborder">Attention </td>
<td class="cellrowborder">Be careful. </td>
</tr>
<tr>
<td class="cellrowborder">Danger </td>
<td class="cellrowborder" >Be scared. Be very scared. </td>
</tr>
</tbody>
</table>
The CSS says
table {border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
font-size: 9pt;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px;}
tr {border: none;}
.cellrowborder {border: none;}
So while it looks as I'd expect in IE, it doesn't in Firefox UNLESS I remove those frame/border/rules attributes in the HTML. Which I can't in production.
Use jQuery's remove attribute on document load to remove the old attributes all together.
api.jquery.com/removeAttr
I've had a quick play with <table frame="border" rules="all">. The key seems to be to override it with another border, for example:
table {
border: none;
border-collapse: collapse;
}
td {
border: 1px solid silver;
}
It's not ideal if you need to remove the border altogether, but I guess you could match the border-color to the page background?
border-color seems to apply.
Maybe using FireBug Inspect Element can help you detect the CSS property and allow you to target it in Firefox (instructions here).
Can you post an example of the code?