Is there a way to see in the Chrome Developer tools that the width of a td element is set by a colgroup?
Some explanation:
I was just trying to change the styling of a huge HTML table that I didn't create or style. There was one TD element in the table that was to small.
- I inspected the td element in the Styles panel. Nothing special to see.
- I inspected the td element in Computed panel. The width element was greyed out there. Also, most of the time there is a little arrows to click that leads you to the code that sets the width. But not today.
- I tried to add style in my CSS
- I tried to make the selectors more specific
- Even added !important (I was desperate, don't judge me)
Nothing worked.
Tthe code of the table is auto generated and very verbose. So it took me a long time to discover the colgroup and col tags above the table header. Once I saw the colgroup everything was clear.
However, to prevent this from happening in the future, I wonder if the Styles and Computed panels say that the Colgroup overwrites any other width. I didn't see anything in the panels.
