Question 45986 in CSS Question posted in
Some basic documentation can be found here.

Vuejs – vue3-easy-data-table – CSS

Im working on a project in vuejs that uses "vue3-easy-data-table" Im following the style recommendations on this page.

https://hc200ok.github.io/vue3-easy-data-table-doc/features/style-customization.html

when I try to use

–easy-table-body-even-row-font-color: #fff;
–easy-table-body-even-row-background-color: #4c5d7a;

It does not take change the background color of the even rows. Even if I add !important it doesn’t make a difference and if you click on the edit with code Sandbox it doesn’t work there either.

Any idea how I could get this to show a different color for even rows as it does in the example.

Tags:

2

Answers


  1. 0

    You should check if you set the table-class-name and alternating attribute to your custom style.

    like in the example there is this code:

    <EasyDataTable
  theme-color="#1d90ff"
  table-class-name="customize-table" // important
  header-text-direction="center"
  body-text-direction="center"
  alternating // important
/>

    .customize-table {
  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #4c5d7a;
}
    Login or Signup to reply.
  2. 0

    Make sure to follow the docs on using --easy-table-body-even-... CSS properties which states:

    Don’t forget to use with alternating feature

    <EasyDataTable
    :headers="headers"
    :items="items"
    table-class-name="customize-table"
    alternating
/>

    .customize-table {
  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #4c5d7a;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search