In my website, text is dynamically appended to the page.
My need if the td has attribute has colspan=2, apply text-align:center.
tblCustomers tr td
{
padding-left:25px;
}
//how do I do this
tblCustomer tr td:hasattribute(colspan=2)
{
text-align:center;
}
Note:-
No suggestion for adding class or id. Its not feasible in my scenario.
No JavaScript or jQuery for this.
add this way
tblCustomers tr td {
padding-left:25px;
}
tblCustomers tr td[colspan="2"] {
text-align:center;
}
https://jsfiddle.net/nsse87c4/
add this style , make sure to define this tblCustomer class or id , for eg: I've put this as class
.tblCustomer tr td[colspan="2"]{
text-align:center;
}
in order to apply a style to all td's with a specific colspan, you can use the following selector:
td[colspan="2"]
or more specifically:
td[colspan="2"]{
text-align:center;
}
source: https://www.w3.org/TR/1998/PR-CSS2-19980324/selector.html
Attribute selectors
CSS2 introduced four attribute selectors:
…
[att=val]
Represents an element with the att attribute whose value is exactly "val".
Here is a solution
tblCustomer tr td[colspan="2"]
{
text-align:center;
}
Just added width: 100% to your table so you see visualize the effect properly.
.tblCustomer
{
width: 100%;
}
.tblCustomer tr td[colspan="2"]
{
text-align:center;
}
<table class="tblCustomer">
<tr>
<td colspan="2">Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Related
This is an example:
http://jsfiddle.net/Bq3AU/
I want nested table tr:first-child not to be red.
I know that I can use a code like:
table.calc table tr {
backgorund:none;
}
But this is only for one nested table. I want to write a css rule that colour only parent table row to be red.
I think it is something with '>' sign like table.calc > tr or something but I always had problems with '>'.
I think you cant use another class CSS for chiltable same that:
<table class="calc1">
<tr><td>title</td><td>title2</td></tr>
<tr>
<td>
<table class = "calc2">
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
</table>
</td>
<td>
text
</td>
</tr>
<table>
CSS:
.calc1 tr:first-child {
background:red;
}
table td {
border:1px solid #000;
padding:10px;
}
.calc2 tr:first-child {
background:blue;
}
I think this is what you want, if not please clarify. I use white as a generic background color, you might choose another:
<style>
/*make all tables white */
table{
background:white;
}
/*make all first child tr's red*/
table tr:first-child{
background:red;
}
/*make all first child tr's that are part of child tables (not parents) white*/
table tr td table tr:first-child{
background:white;
}
/*so now only first child tr's of the top parent tables are red*/
</style>
I am trying to make my table rows highlight when i hover my mouse over them
.Table .Popup tr:hover {
background-color:red;
}
Seems to work find on TD tags, but I seem to have trouble getting it to work for TR tags :
Fiddle :
http://jsfiddle.net/kUTDB/2/
Any idea what I am doing wrong?
The proper CSS should be this:
.Popup tr:hover td {
background-color:red;
}
.Popup .PopupRow:hover td {
background-color:red;
}
You can't (reliably) style a <tr>, so you need to apply the style to children <td>s on hover (hence tr:hover td.
Additionally, the .Table class doesn't refer to any elements in your fiddle, which may also be causing problems.
http://jsfiddle.net/kUTDB/12/
You can just do:
td:hover {
background-color:red;
}
try like this
.PopupContainer .Popup tr:hover {
background-color:red;
}
Fiddle
Your CSS selector was incorrect:
Both
table tr:hover {
background-color:red;
}
and
table .PopupRow:hover {
background-color:red;
}
will work here.
Fiddle: http://jsfiddle.net/kUTDB/7/
if you needed to be very specific, you could use this selector:
div.PopupContainer div.Popuptable table tbody tr.PopupRow:hover{
However, since longer selectors cost time, the more broad selectors are better. Really, you only need .PopupRow:hover here.
You need to do the td
tr:hover td {
background-color:red;
}
As stated on your previous question:
Your CSS selectors are not selecting anything.
.Table .Popup tr:hover {
background-color:red;
}
should be:
.Popup tr:hover {
background-color:red;
}
(See: http://jsfiddle.net/kUTDB/4/)
and
.Table .Popup .PopupRow:hover {
background-color:red;
}
should be
table tr.PopupRow:hover {
background-color:red;
}
or
table .PopupRow:hover {
background-color:red;
}
(See: http://jsfiddle.net/kUTDB/5/)
Mind you, these will both select the same elements so the selector with more specificity (the second one) will be the one that is actually used.
Your first selector, .Table .Popup tr:hover will match tr elements that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table.
Your second selector, .Table .Popup .PopupRow:hover will match any elements with a class of PopupRow that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table.
The markup in your fiddle does not reflect that structure and so nothing is matched by the selectors (which is why your style is not reflected).
.Popup tr:hover {
background-color:red;
}
This will totally work.
Hi I would like to select only the first <td> (td with the text "label") of every row in a table, if you have a simple html like:
<table>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
</table>
I would like to assign for example a width of 10% only to the first <td></td> group with selector I DONT want to use a class.
I have tried the follow selectors:
table.widget tr:first-child td{
width:10%;
border:0;
}
But that selector only will pick the first td of the first tr no all the TD's so I tried
table.widget tr td:first-child{
max-width:10%;
}
Of course what I got is the selection of the first child of the TD. NOT the td itself
it's possible to accomplishing this?
Your second selector is actually correct:
http://tinker.io/40f64
table.widget tr td:first-child {
background: orange;
}
To select the first child of each td, the selector would be like so:
table.widget tr td :first-child { /* note the space after the td */
// styles
}
It should be noted, however, that the OP's sample table does not have the widget class applied to it.
If your table is expressing a collection of key/value pairs, placing your label text within a th might be more appropriate:
http://tinker.io/40f64/1
table.widget th {
background: orange;
}
<table class="widget">
<tr><th>label</th> <td>value</td></tr>
<tr><th>label</th> <td>value</td></tr>
<tr><th>label</th> <td>value</td></tr>
</table>
One way:
table tr td:first-of-type {
background: lemonchiffon;
}
http://jsfiddle.net/PRrq5/2/
Try this:
table tr td:first-child { color: red; }
Fiddle: http://jsfiddle.net/74MFH/1/
I have an HTML document where I have two different tables. One is class Alpha and one is class Beta. I want to assign this css to class Beta only...
td
{
border-style:solid;
border-top:thick double #ff0000;
}
I can not figure out how to assign this only to Beta. Does anyone know how?
Just apply the .beta class selector to the entire table and change your CSS code to apply a rule only to td decedents of .beta like this:
<table class="beta">
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
.beta td {
border-style:solid;
border-top:thick double #ff0000;
}
If you need to apply the rule to multiple elements within .beta simply add an additional selector like this:
.beta td,
.beta th {
border-style:solid;
border-top:thick double #ff0000;
}
Qapla'!
CSS lets you get specific with what elements rules are to be applied to. Just add this rule to the table.Beta td cell declaration and you're done.
table.Beta td
{
border-style:solid;
border-top:thick double #ff0000;
}
Is there a way I can use one category to stylize all of my table cells? I cant just use
td{
}
because I have another table on the same page that I don't want the same style on. The table I want to stylize has around 40 cells, so is there a way to collectively style them short of copy-pasting a class or id 40 times?
Put a selector on the table tag:
<table class="my-special-table">
<tr><td></td></tr>
</table>
table.my-special-table td { /*style it up!*/ }
If your table has a specific attribute such an as ID, you can reference it in CSS specifically:
<table id="myStyledTable">
<tr>
<td>...
Like so:
#myStyledTable td {
}
Use this:
#table-id td {
/* some css */
}
Or
#table-id > tr > td { /* some css */ }
in case you will have other tables within this table that shouldn't have this style applied.
You can give an id/class to that table and do :
#yourtable td { }
Either an id or a class will allow it to be individually styled as:
<table class="myclass">
or
<table id="myid">
and then
.myclass td {}
or
#myid td {}
respectively.