I have a question about the Vuetify3 DataTables:
The icons and checkboxes are transparent, I can't change the property of this and i wish to change the headers of title with other color.
Someone can help me to resolve this?
Here is my code:
<v-data-table
v-model:items-per-page="itemsPerPage"
:headers="donner.headers"
:items="donner.content"
item-key="name"
class="blue-header"
show-select
>
</v-data-table>
<style>
.blue-header th {
background-color: blue;
};
</style>
The initial header background color is set by this declaration:
.v-data-table .v-table__wrapper > table > thead > tr > td,
.v-data-table .v-table__wrapper > table > thead > tr th,
.v-data-table .v-table__wrapper > table tbody > tr > td,
.v-data-table .v-table__wrapper > table tbody > tr th {
background: rgb(var(--v-theme-surface));
}
These selectors give a high specificity, that you need to match in your declaration.
Your blue-header class lands on the element with the v-data-table class, so this should do it:
.v-data-table.blue-header .v-table__wrapper > table > thead > tr th,
.v-data-table.blue-header .v-table__wrapper > table tbody > tr th {
background-color: blue;
}
Alternatively, you can pull out the crowbar and do background-color: blue !important;, but it is not really necessary in this case.
Icons Resolves:
I just forget to install the icons on my project.
So it's done now
" npm install #mdi/font -D "
Now my problem is to change the background of headers.
Related
As part of our payment system there is an automatically generated notice that indicates monthly recurring payments. This is outputted on the page like this:
and is made up of the following elements:
#order_review > .shop_table > thead > tbody > tr > td
There are 4 blocks that all use the 'td' element so I've tried using parent:last-child to select the td element that contains the date (the one I'm trying to style). I have also tried:
#order_review .shop_table tbody tr:last-child {
and
#order_review .shop_table thead tbody tr td:last-child {
still no luck unfortunately. Here is a screenshot of Console:
I have a class called 'table-green-hover' which when set on a table makes it so that the hover colour is LightGreen instead of the usual bootstrap colour
.table-green-hover > tbody > tr:hover > td,
.table-green-hover > tbody > tr:hover > th { background-color: LightGreen; }
However for 2 specific rows in my table (with a class of 'logout-hover') I want those to be a completely different colour, I thought of doing it as
.logout-hover > tr:hover > td { background-color: LightBlue; }
Though it doesn't seem to be doing anything at all, when I hover over those 2 specific rows they still show with the LightGreen.
Edit based on OP's comment:
.table-green-hover tr.logout-hover:hover > td { background-color: LightBlue; }
Old answer:
.logout-hover > tbody > tr:hover > td { background-color: LightBlue; }
The reason is because
.table-green-hover > tbody > tr:hover > th (1 class, 3 elements) is more specific than .logout-hover > tr:hover > td (1 class, 2 elements), and thus got higher priority.
I'm using Bootstrap 3 and applied table-striped table-hover to my table's class.
However, I have changed the default striped color to green. So I have green - white - green - white for my columns.
Now, when I hover, the white turns to blue. This is fine. But when I hover over the green, it stays green.
How can I have every row, on hover, show #ecf3f8?
I've tried this to no avail:
.table-hover tbody tr.odd:hover td, .table-hover tbody tr.odd:hover th {
background-color: #ecf3f8;
}
Sounds like a specificity problem. Try the following:
.table-striped.table-hover>tbody>tr:hover>td,
.table-striped.table-hover>tbody>tr:hover>th {
background-color: #ecf3f8;
}
Try this:
.table-striped tbody tr:hover td,
.table-striped tbody tr:hover th {
background-color: #ecf3f8
}
You can try it here: http://www.bootply.com/2Gp7XHJ9jV
Source: https://github.com/twbs/bootstrap/issues/3223#issuecomment-5735608
try this:
.table-hover tbody tr:hover td {
background: #ecf3f8 !important;
}
edit: also try this:
.table-hover > tbody > tr:hover > td {
background: #ecf3f8 !important;
}
I am trying to use the CSS3 :not selector. Basically, I have a table that when you hover a row, the background color changes:
.table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th {
background-color: #272727;
}
On one of the <tr>'s I apply a latest-review class to the row. When I hover over thelatest-review row, the background color still changes because of the above CSS. I'd like it not to change colors. I've tried this and failed:
.table-hover tbody tr:hover > td:not(.latest-review), .table-hover tbody tr:hover > th:not(.latest-review) {
background-color: #272727;
}
I am not really sure what else to try at this point. I am using Chrome currently and I am not worried about the :not selector not being supported in older browsers.
Well, you write that .latest-review is applied to <tr>, but your code snippet uses <td> and <th>. Either way, it's easier imho to simply add a simpler second rule after your hover rule (and not use :not):
.table-hover tr:hover {
background-color: #272727;
}
.table-hover .latest-review {
background-color: %original_color%
}
The first CSS rule overrides the second. Either remove the first one or reset the color:
.table-hover tbody tr:hover > td.latest-review, .table-hover tbody tr:hover > th.latest-review {
background-color: default-color;
}
I have here an example where you can click on a row and it inserts a new row right underneath. The new row consists of a new table.
See fiddle
As you can see from the fiddle above, there is a hover over CSS in place for each table separately. The problem is now that the hover over from the parent table covers the second table.
I rather would like to override the hover over effect from the parent table when hovering over the new row, so that I can see the hover effect of the sub table instead:
I tried to prevent parent's table CSS to be applied on the new row like this:
table.cb_table-hover tbody tr:hover td:not(.override),
table.cb_table-hover tbody tr:hover th:not(.override){
background-color: #cfe2e8;
}
As you can see in this new fiddle:
However the results are not as I expected. What could I be missing?
Thanks
Try this.
CSS
table.cb_table-hover > tbody > tr:hover > td:not(.override),
table.cb_table-hover > tbody > tr:hover > th:not(.override){
background-color: #cfe2e8;
}
let me know if this helps you.
I have just added > to target direct child
Just use the CSS specificity:
.cb_inline_block {
display:inline-block;
}
.cb_table-hover tr:hover td,
.cb_table-hover tr:hover th{
background-color: #cfe2e8;
}
.cb_table-hover .sub_table-hover tr:hover td,
.cb_table-hover .sub_table-hover tr:hover th{
background-color: #cfe2e8;
}