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/
Related
I am making a table on a webpage inside Zetaboards forum software. When I am trying to create alternating background color for each row, the forum's default CSS intervenes.
My HTML:
<table class="stats">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
My CSS:
table.stats tbody tr:nth-child(even) {
background-color: #333;
}
table.stats tbody tr {
background-color: #232;
}
The above works just as I want it to in cssdeck.com. However, when I move it on my forum webpage, the forums "td" css takes over.
Forum CSS:
td {
background-image: ...;
background-color: ...;
background-position: ...;
...
}
How do I override the forum's default CSS?
I have tried adding !important, but it didn't work. I also tried to add a class for each "tr" and add tr.class in my css. That also didn't work.
I do have control over my forum's theme CSS. But I can't change it, since that "td" style is widely used across the forum design. I don't want to add a class to each td in my HTML either...
I appreciate any help I can get, thank you for your time!
Table cells are contained within table rows. When you apply background color to both rows and cells (as is the case with the above example) the cell background color will cover the rows' background color.
Workaround: add this rule to undo the forum's styles applied on table cells:
table.stats td {
background: transparent none;
}
And apply background color on rows (i.e. no change in your original example):
table.stats tbody tr:nth-child(even) {
background-color: #333;
}
table.stats tbody tr {
background-color: #232;
}
1.)you have to add td after tr in your css
Try this:
<style>
table.stats tbody tr td:nth-child(even) {
background-color: #333 !important ;
}
table.stats tbody tr td{
background-color: #232 !important ;
}
</style>
I am trying to use css bootstrap framework in my project
I am using table with the following classes table table-bordered table-striped
I want to remove the borders from all the column except the first column.
Here is my table in a fiddler https://jsfiddle.net/8yf0v3xt/16/
Basically in this screenshot, I only want to remove the vertical borders in the red rectangle border.
<table class="table table-bordered table-striped">
<thead>
<tr><th></th><th></th>...</tr>
</thead>
<tbody>
<tr><th score="row"><th></td><td></td>...</tr>
...
</tbody>
</table>
EDITED
Or, if I remove the table-bordered class, how can I only add a column on the very first column? something like this screenshot
How can I do that?
You need to look into the :first-child pseudo selector. Link here
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
You can select all of the td elements and remove the border from them all with:
table tr td { border: none; }
And then to add unique styling to just the first element:
table tr td:first-child { border: default; } /* Or whatever styling you may wish..
The same can be done with :last-child which will of course select the last element in oppose to the first.
And if you need to be even more specific again.. You can use :nth-child(x) where x is the number of the element that you wanted.
Fiddle: https://jsfiddle.net/8yf0v3xt/18/
UPDATE
Fiddle: https://jsfiddle.net/8yf0v3xt/22/
I've removed the .table-bordered class and added the following CSS:
table { border: 1px solid #ddd; }
table.table tr, table.table tr th, table.table tr td { border: none; }
table.table tr th:first-child, table.table tr td:first-child { border: 1px solid #ddd; }
I have used the pseudo selectors like explained above to add styling to just the first column.
I have a CSS provided which contains following code
table.exm_table tbody tr.odd td{
background-color:#ffffff;
}
I'm not sure what should it style. Will be background color set at the td element in following structure?
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
EDIT:
Actually I've overlooked second part of the CSS:
table.exm_table tbody tr:nth-child(odd) td,
table.exm_table tbody tr.odd td
Which caused my confusion why code haven't been working...
Your HTML is was incorrect but otherwise the CSS will work and targets the td. Note that in your (original) example there is no table-row <tr>. You'll see it works with the corrected mark-up:
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/8zan1jyf/
As you can see, your CSS selector does address the td - or more specifically:
any td within a tr (that has the classname 'odd') within a tbody within a table (that has the classname 'exm_table')
There's probably no need to be quite that specific ;)
UPDATE
Since you've edited your question here's some further info about the alternating row style that seems to be confusing you.
table.exm_table tbody tr:nth-child(odd) td uses the nth-child selector to get tds in alternate rows.
table.exm_table tbody tr.odd td simply selects all tds within trs that have the classname 'odd'. (It's this classname that may be confusing because it has nothing to do with odd/even in itself and could just as easily be called 'bob')
Here's a demo to help clarify: http://jsfiddle.net/8zan1jyf/8/
/* to style ALL tds */
table.exm_table tbody tr td {background-color:pink;}
/* to style EVERY-OTHER td */
table.exm_table tbody tr:nth-child(odd) td {background-color:red;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'odd' (nothing to do with actual odd/even ordering) */
table.exm_table tbody tr.odd td {background-color:blue;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'bob' */
table.exm_table tbody tr.bob td {background-color:green;}
your initial css targets td and sets background to white (#fff)
you can just target classes directly
.exm_table {
background-color:#ffffff;
}
.odd {
background-color:#eeeeee;
}
Look at this fiddle: http://jsfiddle.net/czz2ejfw/1
Style for my table:
td {
color: #669;
}
tbody tr:hover {
color: red;
}
The text color should be red when we hover. In fact, if you look at developer tools you see that red should be applied. But incredibly, it displays as #669. WTH?
This is consistent across Firefox, Chrome, Safari, and Opera.
It isn't more specific. It matches a different element.
td { color: #669; } overrides the default stylesheet (which is probably something like td { color: inherit; }) because author stylesheets override browser stylesheets.
If you want to match the td when the tr is hovered, then you need to mention the td in the selector (e.g. with a descendant combinator).
tbody tr:hover td {}
<tr> is getting the color:red; but there is nothing there to be styled red.
Instead you would need to do this, which applies red to all <td> cells that are children of the parent <tr>:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td {
color: red;
}
JS Fiddle Demo
As actually already said in a comment, the td is a child of the tr, so although the background of the tr changes, if you can't see it anywhere because none of the td's are transparent you won't get anywhere. The correct solution thus is to either make the td's transparent (default) and instead style the tr's always, or use tr:hover td{} to override the styles of the td instead of styling the tr.
Update that part of your CSS to this and it will work:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td{
color: red;
}
Red is higher priority in your version because it is specific for td the tbody tr is not that specific
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>