0

I am fiddling with the looks of a page from our web application. I need to make lots of small changes quickly to judge the effect, and the developer tools give me the functionality I need, as I'm editing the CSS directly in the element inspector.

However, there is a table on this page, which was created by some JavaScript library. The library inserts style="width:1024px" directly in the <table> tag. I need to change this width to make it 100% of the parent width, but it doesn't work.

Deleting the style attribute from the HTML without reloading the page does not change the width. Setting a new width in the stylesheet does not work because the inline CSS supersedes it. Reloading the page overwrites my changes made in the element inspector.

I cannot get into the code and change the setting used for the library (I assume it allows the developer to define a constant width and does not do it by itself). What options do I have to see the table at the width I need without reprogramming the whole thing?

rumtscho
  • 2,474
  • 5
  • 28
  • 42
  • 1
    You can modify these values manually, as they are reported as attributes of the element itself at the top of the style in the developer tools... There are checkboxes in front of every declaration you can use to toggle them (and when you untick them it usually 'comments out' that style). – somethinghere Mar 08 '16 at 16:39
  • @daniel This doesn't work either. Changing or deleting it outright, the page still keeps the old margin and the tools tell me that the old inline style is what trumps the other style I'm trying to set in the element.style in the devtools. – rumtscho Mar 08 '16 at 16:40
  • 1
    Did you try using !important; ? Did you delete the inline style by double clicking on it to highlight and edit? Otherwise the layout of the page might prevent width:100% from actually working like you expected to see it. – Anders Elmgren Mar 08 '16 at 16:43

2 Answers2

1

If you really can't remove the inline style you can override it adding the !important keyword on your css style.

like that 

table {
    width: 100% !important;
}
Yoann Augen
  • 1,966
  • 3
  • 21
  • 39
0

I found out that it indeed works when I change the inline tag directly from style="width:1024px" to style="width:100%".

My mistake had been to first delete the complete inline tag, then write it back again with the new value. It seemed to not "get it" that there has been a change.

rumtscho
  • 2,474
  • 5
  • 28
  • 42