CSS rule has a blank source (in web inspector)

Question

When I inspect an element, and look at the "Computed" CSS tab, I see a list of properties. If I expand any one property I see something like this:

Which makes perfect sense: the drop-down shows the styles in which they were overriden, with the top one the "winner". All these styles have a link to the right that will show the source where they were defined.

What perplexes me, with an element that I'm trying to control the width of, but can't seem to find where it is overriden, is a situation like this:

Note that the top style, that I believe should be the "winner", isn't struck-through, yet the value of the property is very different and there is no source listed to explain this difference. Where is this override coming from?

I have tried reordering my style sheets, styling directly on the HTML element, using !important in the relevant CSS selector, respecifying my selector to as specific as you can get, and still I can't take hold of the width property of this table.

I've poured hours into it so any help is appreciated.

I'm using Firefox, and this issue appears in both Firebug and the Firefox web inspector.

Screenshot of relevant table:

Answer 1

It's likely not being overridden, but being forced to be different by way of content. I see you are inspecting a table's th cell, which will stretch to accommodate the content within it's column, even if it's width is defined in css.

<table>
  <tr>
    <th>30</th>
    <th>30</th>
    <th>30</th>
  </tr>
  <tr>
    <td>30</td>
    <td>More_than_30!</td>
    <td>30</td>
  </tr>
</table>

/* CSS */
th {width:30px; background:#CCC;}
td {width:30px; border:1px solid #CCC;}

Here, even though the th and td cells are given a width:30px; that center row's cells' computed widths will be much larger due to the stretching of the data to accommodate the long, non-breaking value. In this case, there is no CSS rule overriding the 30px.

See this fiddle: http://jsfiddle.net/rgthree/kYAG7/