I wish to add custom coloring to a cell.
tried using
`styles: [`
:host /deep/ ng2-smart-table tbody > tr > td:first-child {
color: red;
}
`]`
but this changes the color for the entire first column
If you want to color the first cell not only the first column you need to add first-child to tr as well:
:host /deep/ ng2-smart-table tbody > tr:first-child > td:first-child {
color: red;
}
Related
Say I have the following css:
.InfoTable-main-table tbody tr td:before{
background: #222;
color: #fff;
content: attr(title);
display: block;
left: 0;
padding: .25em .5em;
position: absolute;
top: 0;
width: auto;
}
but I want a more specific css to have none of that i.e.
.InfoTable-main-table tbody tr td.extra:before{
}
However, the previous css still applies. Is there a way to disregard the more general css or will I have to relegate to just applying it to a specific class instead?
Assuming that you're asking for a set of styles applied to table cells without the 'extra' class and styles with the class, the :not() selector seems like a good fit:
.InfoTable-main-table tbody tr td:not(.extra):before{
background: #222;
...
}
.InfoTable-main-table tbody tr td.extra:before{
}
you can use !important after propertive css like this:
.InfoTable-main-table tbody tr td.extra:before{
left: 100px!important;
}
I styled my Table with different colors on every row (odd/even), but when hovering over one row, it should change it's color. It works well on PC but for some reason it changes every of the rows' colors to the same color in my iPhone when clicking one of the rows. This is an example using the same CSS I used.
.tablestyle tr
{
background: #b8d1f3;
}
.tablestyle tr:nth-child(odd)
{
background: #b8d1f3;
}
.tablestyle tr:nth-child(even)
{
background: #dae5f4;
}
.tablestyle tr:hover
{
background: #7CAAE9;
}
.tablestyle tr:first-of-type
{
background: #2470D5;
}
<table class="tablestyle" border="1" style="width:70%">
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
</table>
I couldn't find anything wrong with this code, but why then it changes every of the rows' colors?
I want to change the colors of Bootstrap table-striped. I have read this question: Bootstrap table striped: How do I change the stripe background colour?. So I can change it with, for example:
.table-striped > tbody > tr:nth-child(2n+1) > td,
.table-striped > tbody > tr:nth-child(2n+1) > th
{
background-color: red;
}
However, my apps needs a different color for the "selected row". So I have a CSS class called "selectedRow" that we add it to the tr that are selected. The property is:
.selectedRow td
{
background-color: blue;
color: black;
}
I need that for the selected row, background color takes precedence over the Bootstrap table-stripped. That is...for the tr that I add the css class selectedRow I want them blue, not red. Note that I CANNOT use !important here (there is a reason for this).
So is there another way I can do to change Bootstrap table-striped so that my selectedRow css class takes precedence?
You have to be more specific than the Bootstrap styles.
For example like this:
.table-striped>tbody>tr.selectedRow:nth-child(odd)>td,
.table-striped>tbody>tr.selectedRow:nth-child(even)>td {
background-color: #819bbf;
color: black;
}
I hope you get the idea.
Here is a code from the table.less:
.table-striped {
> tbody > tr:nth-child(odd) {
> td,
> th {
background-color: #table-bg-accent;
}
}
}
Therefore you can use:
.table-striped > tbody > tr:nth-child(odd) > td {
background-color: #819bbf;
color: black;
}
JSBin
This is a general question, given a html component (a table for example), I want to add a new css class overwriting the current ones. For example I want to overwrite the td hover of the following table, adding a new class in order to do not affect the other tables that use the classes in common:
html (using bootstrap classes)
<table id="calDate" class="table table-striped table-bordered table-condensed table-hover alignCenter">
<tbody>
<tr>
<td>
<tbody>
</tbody>
table>
css
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
max-width: 90%;
margin-bottom: 5px;
}
.table th,
.table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
background-color: #f5f5f5;
}
I try to overwhrite the last class creating a new one named .alignCenter, trying to change the td hover behavior and also the text-align, the aligment worked but the mouse over it doesn't worked:
.alignCenter {
}
.alignCenter-hover tbody tr:hover > td,
.alignCenter-hover tbody tr:hover > th {
background-color: #df8505;
}
.alignCenter th, .alignCenter td{
text-align: center;
}
What's the usual way to create a new css class overwhiting the existent classes?
How can I use the new created css class to change the td hover behavior for example change the background color?
In the example the class .table has max-width: 100%; and it's defined again below with max-width: 90%;. Which max-width is used in the table, and why?
Ok, let me answer your questions one by one:
-1. What's the usual way to create a new css class overwhiting the existent classes?
You can overwrite those by either modifying the classes themselves or add a different value for another class on the same element (or inline style them).
-2. How can I use the new created css class to change the td hover behavior for example change the background color?
Simply do this:
tr:hover td {
/* do hover stuff */
}
-3. In the example the class .table has max-width: 100%; and it's defined again below with max-width: 90%;. Which max-width is used in the table, and why?
In CSS it's always the most recently (last) command that will "win". You can, however, override that using !important like this:
.table {
/* ... */
max-width: 90% !important;
/* ... */
}
And more: get rid of the table-hover, it's unnecessary; instead set up its hovered variation like this:
.table:hover {
/* stuff goes here */
}
Take a look at this:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
the class attributes at the class below the other class will count (so the order of the stylesheet matters), else you can use ex:
max-width:90%!important;
or choose are more specific selector
Thing is,
You have to create new class.
.old
{
//already have
}
.new
{
// do your stuff with !important so it will take this
// background-color:#fff !important
}
or
td:hover > .new
{
// do your stuff
}
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