0

I add class into cell to change default width, height, etc... . Now in action, the cell still keep the default inline style. in case width.

enter image description here

How do can I remove/disable default inline style?!

 var tabledata = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];
 
 var table = new Tabulator("#example-table", {
    data:tabledata, //assign data to table
    columns:[ //Define Table Columns
    {title:"Name", field:"name", cssClass:"custom-width"},
        {title:"Name", field:"name"},
        {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
    ],
});
.custom-width{
  width:150px
}
<link href="https://unpkg.com/tabulator-tables@5.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.3/dist/js/tabulator.min.js"></script>

<div id="example-table"></div>
LarakBell
  • 596
  • 1
  • 7
  • 19
  • First, your class spell wrong, so it not work, but i think it just a typo in the demo. Second, inline-style will take the highest priority, so no normal class can override it. There is two ways to fix: remove the style inline, whether by delete it in html code or with javascript or adding `!important` to the attribute you want to override. – Eezo Dec 14 '22 at 09:21
  • @HenryVarro: Oh, you right. I edited. `!important' really worked, but I reckon isn't the best way. You said that: remove the style inline, whether by delete it in html code. I think disable inline style is better way. but how to?! – LarakBell Dec 14 '22 at 09:26
  • Yes, it not the best way, but since it inline-style, and if you can't remove them, only `!important` can override it in this case. As for remove it in html, since i don't know what tabulator is, i can only assume with the code above the inline-style auto generate with the table when the page load, so you can't manually delete them like in normal html. The only hope left beside `!important` is using javascript or jquery to reset css (you can search it [here](https://stackoverflow.com/questions/5195303/set-css-property-in-javascript), lots of answer to try) – Eezo Dec 15 '22 at 01:32

1 Answers1

0

I prefer to use min-width, if width not work

.custom-width{
   min-width: 200px;
}

it's working good, otherwise you can check below options.

if you want a limit width then you can also use max-width with min-width

.custom-width{
   min-width: 200px;
   max-width: set max width

}

if your style not apply then you can use CSS property

!important

.custom-width{
    width: 150px !importnat;
}

if class not access style then you can use id, because id is more powerful

#custom-width{
    // your code
}

if you not want to use !important then you can access with parent tag / ClassName

.parent-class .custom-width{
  // Your Code
}

if not access by parent class, then you can access by id. because id is more powerful than class

#id .custom-width{
    width: 150px;
}

otherwise use !important if not access by parent class also

Savraj Dutta
  • 17
  • 2