How to add border-spacing in Q-Table
-
Hi ,
I want to add border-spacing in quasar table by default q-table class has border-spacing: 0 , how i can change it into border-spacing: 1
q-table {
width: 100%;
max-width: 100%;
border-collapse: separate;
border-spacing: 0;
}https://codepen.io/jmriyaz84/pen/ZEpYdry
In this code pen If I uncheck border-spacing: 0; from .q-table sty;e I am getting expected output , how to do that via script .
image url) -
.q-table { border-spacing: 2px !important; } -
@jmriyaz84 the !important overwrites a similar declaration in CSS as final.
-
then use it as inline style with important. Should override everything.
-
@dobbel did you know something about this https://forum.quasar-framework.org/topic/7302/input-s-error-message-s-color
-
Thanks Team for your help , I will try & let you now
-
Thanks a lot , its working
-
@dobbel Thanks
-
@dobble & Team , It is working in codepen but when I add below css in my actual code under <style scoped> tag it is not working , any idea how to solve this.
https://codepen.io/jmriyaz84/pen/ZEpYdry
<style scoped>
.q-tab-panels {
border: 1px solid #eeeeee;
border-top: none;
}
.q-table {
border-spacing: 2px !important;
}
.panel {
background: url(…/…/…/assets/top_middle.jpg);
}
tbody tr:nth-child(2n-1) {
background: #b2d9f3;
text-align: center;
color: #000000;
font-weight: normal;
font-size: 11px;
height: 16px;
border: #2d2d2d;
}
tbody tr:nth-child(2n) {
background: #ddedf7;
text-align: center;
color: #000000;
font-weight: normal;
font-size: 11px;
height: 16px;
}
.acd-card {
width: 100%;
max-width: 500px;
}
</style> -
@jmriyaz84 use deep selectors https://www.google.com/amp/s/www.telerik.com/amp/understanding-vue-deep-css-selector/WEx1ZE1sRUVUWkE5S0dNbEhBNXJyUkU3T1Q4PQ2. Sidenote in sass/scss use
::v-deep. -
@metalsadman it does the magic , thanks for your help . Happy to have great community .
-
@metalsadman One more help each . Every time when I run quasar build command it creates js & css files with different name , like vendor.d4137955.js & app.711265e7.js , so every time I have to delete old files & copy these new files in my tomcat server (which is monolithic application designed through JSP) .
It would be great if any configuration available to create those files in same name so that I just drag & drop. It will save lot of time. -
There’s a reason why it changes names: if you change the file contents and don’t change the name, most browsers will not request the new file and you’ll have to do a hard f-5 to load the new file from the server.
