Hi i have this piece of CSS:
tbody:hover td {
color: transparent;
text-shadow: 0 0 3px #aaa;
}
tbody:hover tr:hover td {
color: #444;
text-shadow: 0 1px 0 #fff;
}
When i hover a row of a table i want that the other rows of that table become transparent. This CSS work for the normal td filled with text, but for the td filled with link(a tag) it doesn't work. I can't find why.
This is a part of the HTML code
<tbody>
<tr>
<td>Untitled.txt</td>
<td>File di prova</td>
<td><a href='/comment/comment.php?idF=182' style='color: black;'>Leggi i commenti</a></td>
<td><a href='get_file.php?id=182' style='color: black;'>Download</a></td>
</tr>
</tbody>
This is simple. Your a tags have inline styles. Those have a high ranking in css hierarchy. So the reason why this doesn't work is this piece of code:
style='color: black;'
Remove the inline style and apply it via class instead.
I'm not sure if it's possible to make others transparent using CSS only (CSS can not effect on previous siblings). however, you can't use :hover twice, unless you do something like this:
tbody tr:hover > td, tbody tr:hover > td a {
color: #444;
text-shadow: 0 1px 0 #fff;
}
In order to find a solution for the transparency issue, you may try to use nth-child() to decide which child will be changed on hover. for example:
tbody tr:nth-child(1):hover {
color: transparent;
text-shadow: 0 0 3px #aaa;
}
You can also decide what to do when the element is not hovered, example:
tbody tr:nth-child(1):not(:hover) {
// If element is not hovered
color: transparent;
text-shadow: 0 0 3px #aaa;
}
Try using inherit property:
a {
color: inherit !important; //important just for extra measure
}
I think you should put the a tag in your CSS too .
tbody:hover td, tbody:hover td a {
color: transparent;
text-shadow: 0 0 3px #aaa;
}
Related
I am auto-generating the HTML output using KDB. I would like to avoid labeling the html with classes if possible because I'd rather not re-work the KDB code. I tried using first-child, but it didn't work. Any other suggestions?
KDB:
.util.html.t:{[t]
if[not type[t] in 98 99h; :"Result not a table type!"];
r:"<table cellSpacing='0' cellPadding='2'>";
r:r,"<tr class='title'>";
r:r,(,/){"<th>",x,"</th>"} each string cols t;
r:r,"</tr>";
r:r,(,/){"<tr>",((,/){
if[type[x]=type[""]; x:`$x];
if[not type[x]=type[enlist ""];
x:string x;
if[x like "*[0-9]%"; :"<td class=\"centeralignum\">",x,"</td>"];
];
if[type[x]=type[enlist ""]; x:"," sv x];
:"<td>",x,"</td>";
} each x),"</tr>"} each 0!t;
r:r,"</table>";
:r;
}
CSS:
h3 { font-size: 16px; font-weight: bold; font-family: Calibri }
body { font-size: 12px; font-family: Calibri }
tr.title { background: lightblue repeat-x left bottom; font-weight: bold; border: 1px solid #000000;}
th {border: 1px solid black;}
table { border: 1px solid black; border-collapse: collapse;}
table td {border-left: 1px solid black; border-right: 1px solid black; width:125px;}
table td:first-child {font-weight: bold;}
td.centeralignum {text-align: center}
HTML
<table cellSpacing='0' cellPadding='2'><tr class='title'><th>name</th><th>a</th><th>b</th><th>c</th></tr><tr><td>bob</td><td>1</td><td>4</td><td>7</td></tr><tr><td>anna</td><td>2</td><td>5</td><td>8</td></tr><tr><td>ray</td><td>3</td><td>6</td><td>9</td></tr></table>
Using the HTML and CSS on Firefox that you gave worked for me. I even toggled the first-child property to make sure that it was causing it which it was. The first-child property has been supported for quite a while but it is worth checking here to see if your browser supports it.
You can go into developer tools on your browser and select the element in the inspector to see the styles that are being applied. If they are being overridden they will have a strikethough and you can also toggle properties or add new ones in the developer tools to see how they change the display
I'm having trouble removing the inherited styles in a sub-table. My tables basically look like this:
<table class="twocoltable">
<thead>
<tr><th>BlahBlah</th></tr>
</thead>
<tr>
<td>blah</td>
<td>
<table class="nostyle">
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
</td>
</tr>
</table>
EDIT My .css now looks like this. The sub-table has no styles, but the parent table's td styles aren't working, but the th styles are working.
.twocoltable { border-spacing: 0px; padding: 0px; border: 1px solid #666666; }
.twocoltable>thead>tr>th { text-align: center; font-weight: bold; color: black; font-size: 12pt; padding: 4px; background-color: #DDD; }
.twocoltable>tr>td:first-child { text-align: right; vertical-align: top; font-weight: bold; color: black; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; }
.twocoltable>tr>td:last-child { text-align: left; vertical-align: top; font-weight: normal; color: #333333; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; white-space: nowrap; }
.nostyle * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
What I end up with at the end is a properly formatted parent table, but the sub-table also contains the formatting. It still has the bolding, borders, and alignment.
What am I missing?
Assign your styles only to your parent table's immediate children. This should work for properties like margin and padding. I.e.:
Instead of:
.twocoltable th
.twocoltable tr td:first-child
.twocoltable tr td:last-child
Do:
.twocoltable>thead>tr>th
.twocoltable>tr>td:first-child
.twocoltable>tr>td:last-child
However, other properties such as font-weight will still apply to child elements, because they are inherited. For those, you'll have to manually override in .nostyle definitions (which you haven't done). E.g.:
.nostyle {
font-weight: normal; // initial also works
}
EDIT:
Updating my answer with a general overview of what should be the final solution.
.twocoltable th {
// styles that will be applied to all th elements that live inside .twocoltable, including sub tables
}
.twocoltable tr td:first-child {
// styles that will be applied to all elements that are the first td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable tr td:last-child {
// styles that will be applied to all elements that are the last td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable>thead>tr>th {
// styles that will be applied ONLY to th elements that are direct children of tr elements that are direct children of thead elements that are direct children of .twocoltable. This excludes sub table th elements
}
// You should have got the idea by now
.twocoltable>tr>td:first-child {...}
.twocoltable>tr>td:last-child {...}
.nostyle {
// Styles that override styles that are inherited from its parent element even when that style has not been directly applied to it (e.g. font-weight)
}
By using this notation: .twocoltable tr, you will apply that style to all children of .twocoltable that are tr, no matter how deep they are.
You can choose to get more specific by adding classes to your tr elements, etc. Or you can use the child selector, >. It ensures the style is only applied to immediate children: .twocoltable > tr.
By having more specificity with your CSS, a great summary is found linked here, it will take precedence. Maybe using an ID for your main table, and a class for your nostyle cells would be the best way to organize it?
<table id="twocoltable">
<table class="nostyle">
Another option, you can override with CSS using !important, a jsFiddle linked here.
I have a css rule...
tr.my-style td.my-style-2
{
border-top: 1px solid #F00;
}
This gives a red border to every data-cell, in every row in my table. 'my-style' and 'my-style-2' are attached to the html from a generated component.
Where do I place the first-child selector in the rule to only apply the style to the first row in my table?
Here is my actual css using 'get css path' in FireFox...
html.js body div.container div.row div.col-md-9 table#Accounts.dxgvControl_Bootstrap3 tbody tr td table#Accounts_DXMainTable.dxgvTable_Bootstrap3 tbody tr#Accounts_DXDataRow0.dxgvDataRow_Bootstrap3 td.dxgv
But '#Accounts_DXDataRow0' refers to the first row. I want to generalise the rule without using hardcoded identifiers.
I tried...
tr.dxgvDataRow_Bootstrap3:first-child td.dxgv
{
border-top: 2px solid #DDDDDD;
}
You place it at the end of the tr selector:
tr.my-style:first-child td.my-style-2
{
border-top: 1px solid #F00;
}
The :first-child pseudo-class represents the very first child of its parent. Try the sibling selector(~) instead.
/*default*/
td{border:1px solid #333}
/*style of first element*/
tr.my-style td.my-style-2{
border-top: 1px solid #F00;
}
/*style for all the rest*/
td.my-style-2 ~ td.my-style-2 {
border-top:1px solid #333;
}
JSFiddle example
Please check this answer from Lea Verou about a similar question:
https://stackoverflow.com/a/5293095/935077
Essentially i have a pricing table with the class of .priceblock, and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock. The code to me seems correct but nothing changes.
Heres the initial li tag:
ul.pricingtable .priceblock .contents li {
font-family: 'OpenSans';
font-size: 13px;
width: 81.904762%;
height: 35px;
margin:0 auto;
padding: 10px 0;
border-bottom: 1px solid rgba(221,221,221,1);
}
And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
Any ideas?
I think you might need to change the hover state from.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
To:
.contents li:hover {
border-bottom: 1px solid rgba(255,117,109,1);
}
HTML may be able to read it better.
The css attributes need to be equals.
for example:
If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.
And in the content of block, they need to be same.
for example:
border-bottom: 1px solid rgba(221,221,221,1);
and
border-bottom: 1px solid rgba(255,117,109,1);
You cann'ot use once with "border-bottom" and then with "border-color" only...
I think an image best describes this: JS FIDDLE HERE: http://jsfiddle.net/fp2Ak/
What I want to do, is for those lines to actually touch. Each one is a span with a number in. within a td. Note: some Tds contain multiple spans, for example, 218 and 222. (you can see tr with faint blue lines.)
As you can see it does touch at one point, as this is the biggest element in the column (including header). But this is rarely the case. How would I stretch it to touch in ALL Cases.
You can suggest using someting other than span, but please note that I do need more than one thing in a td, and hence cant be applied to the td.
The CSS that governs most of this so far:
table.Timetable td , table.Timetable th
{
border-spacing: 0px;
padding: 0px;
}
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.bookingStart
{
border-left: 2px solid black;
}
.bookingEnd
{
border-right: 2px solid black;
}
Oh and preferabblly Id like to be able to pad the cells again, as the th clearly have been merged together.
JSfiddle of it here: http://jsfiddle.net/fp2Ak/
spans have to be floated in order to be affected by width, so you could do something like:
td span{float:left; width:100%; min-width:100%;}
or more accurately if I am understanding your css properly:
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
width:100%;
min-width:100%; /*some browsers like this better*/
}
Your should put your borders on the td's not the spans. This will allow you to also put some padding on the td's to make even the long numbers look good.