title: override a html table td style
body: <p>I am trying to overwrite a td style like this:</p>
  
  <pre><code>.valuator .sw-slots table, tr, td { width 100% }
  </code></pre>
  
  <p>so I did this: </p>
  
  <pre><code> td.license-name-td{
    width: 100px !important;
  }
  </code></pre>
  
  <p>The table took always the "global" style and overwrites, rather ignores my style. Even chrome doesn't cross the link out, it just ignores that part. </p>
  
  <pre><code>  td.license-name-td {
      width: 100px !important
    } 
  
  .valuator .sw-slots table, tr, td {
      width: 100%;
   }
  </code></pre>
  
  <p>(Chrome computed css output)</p>
  
  <p>Is there a special way to overwrite the td tag afterwards? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.valuator .sw-slots table, tr, td {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: right;
    color: #3c3c3c;
  }
  
  table.license-table td.license-name-td {
    text-align: left !important;
    word-break: break-word;
    overflow: hidden;
    width: 100px !important;
  }
  
  table.license-table td.license-td {
    text-align: left !important;
    margin-left: 3px;
    word-break: break-word;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="t3lsg license-table" style="font-size: 12px;"&gt;
    &lt;tbody&gt;&lt;tr&gt;
      &lt;th style="text-align: left;"&gt;Software&lt;/th&gt;
      &lt;th style="text-align: left;"&gt;Version&lt;/th&gt;
      &lt;th style="text-align: left;"&gt;Source&lt;/th&gt;
      &lt;th style="text-align: left;"&gt;License&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="4"&gt;
        &lt;div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="license-name-td"&gt;Fleck&lt;/td&gt;
      &lt;td class="license-td"&gt;0.9.6.19&lt;/td&gt;
      &lt;td class="license-td"&gt;https://github.com/statianzo/Fleck&lt;/td&gt;
      &lt;td class="license-td"&gt;MIT License&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="4"&gt;
        &lt;div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
          &lt;tr&gt;
      &lt;td class="license-name-td"&gt;HTML Agility Pack&lt;/td&gt;
      &lt;td class="license-td"&gt;HAP 1.4.6&lt;/td&gt;
      &lt;td class="license-td"&gt;http://code.google.com/p/heartcode-canvasloader/&lt;/td&gt;
      &lt;td class="license-td"&gt;Microsoft Public License &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="4"&gt;
        &lt;div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="license-name-td"&gt;jQuery&lt;/td&gt;
      &lt;td class="license-td"&gt;1.10.2002&lt;/td&gt;
      &lt;td class="license-td"&gt;http://jquery.com&lt;/td&gt;
      &lt;td class="license-td"&gt;MIT License&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="4"&gt;
        &lt;div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="license-name-td"&gt;jQuery Knob&lt;/td&gt;
      &lt;td class="license-td"&gt;11.2.8&lt;/td&gt;
      &lt;td class="license-td"&gt;http://anthonyterrien.com/knob&lt;/td&gt;
      &lt;td class="license-td"&gt;MIT License&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT: I changed one mistake, that i forgot to change one inline style to a class, now this is the new result. </p>