override a html table td style

Question

I am trying to overwrite a td style like this:

.valuator .sw-slots table, tr, td { width 100% }

so I did this:

 td.license-name-td{
  width: 100px !important;
}

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.

  td.license-name-td {
    width: 100px !important
  } 

.valuator .sw-slots table, tr, td {
    width: 100%;
 }

(Chrome computed css output)

Is there a special way to overwrite the td tag afterwards?

 .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; } 

 <table class="t3lsg license-table" style="font-size: 12px;"> <tbody><tr> <th style="text-align: left;">Software</th> <th style="text-align: left;">Version</th> <th style="text-align: left;">Source</th> <th style="text-align: left;">License</th> </tr> <tr> <td colspan="4"> <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"> </div> </td> </tr> <tr> <td class="license-name-td">Fleck</td> <td class="license-td">0.9.6.19</td> <td class="license-td">https://github.com/statianzo/Fleck</td> <td class="license-td">MIT License</td> </tr> <tr> <td colspan="4"> <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"> </div> </td> </tr> <tr> <td class="license-name-td">HTML Agility Pack</td> <td class="license-td">HAP 1.4.6</td> <td class="license-td">http://code.google.com/p/heartcode-canvasloader/</td> <td class="license-td">Microsoft Public License </td> </tr> <tr> <td colspan="4"> <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"> </div> </td> </tr> <tr> <td class="license-name-td">jQuery</td> <td class="license-td">1.10.2002</td> <td class="license-td">http://jquery.com</td> <td class="license-td">MIT License</td> </tr> <tr> <td colspan="4"> <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"> </div> </td> </tr> <tr> <td class="license-name-td">jQuery Knob</td> <td class="license-td">11.2.8</td> <td class="license-td">http://anthonyterrien.com/knob</td> <td class="license-td">MIT License</td> </tr> </table> 

EDIT: I changed one mistake, that i forgot to change one inline style to a class, now this is the new result.

Answer 1

First, in your example code, I added the two enclosing div 's ( .valuator , .sw-slots ) so that the first CSS rule applies to the table.

After that, you need to make sure that the widths of the table cell are set to a default of auto except for td.license-name-td which had a 100px width.

You need to reset the td for the separator td[colspan="4"] to width: auto and then the same for td.license-td .

I think this is what you need. Just be on the look out for other CSS rules that might be in hour style sheets that might override these.

 .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; } td[colspan="4"] { width: auto; } td.license-name-td { text-align: left; word-break: break-word; overflow: hidden; width: 100px; background-color: lightblue; } td.license-td { text-align: left; margin-left: 3px; word-break: break-word; width: auto; } 

 <div class="valuator"> <div class="sw-slots"> <table class="t3lsg" style="font-size: 12px;"> <tbody> <tr> <th style="text-align: left;">Software</th> <th style="text-align: left;">Version</th> <th style="text-align: left;">Source</th> <th style="text-align: left;">License</th> </tr> <tr> <td colspan="4"> <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"> </div> </td> </tr> <tr> <td class="license-name-td">Fleck</td> <td class="license-td">0.9.6.19</td> <td class="license-td">https://github.com/statianzo/Fleck</td> <td class="license-td">MIT License</td> </tr> <tr> <td colspan="4"> <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"> </div> </td> </tr> <tr> <td class="license-name-td">HTML Agility Pack</td> <td class="license-td">HAP 1.4.6</td> <td class="license-td">http://code.google.com/p/heartcode-canvasloader/</td> <td class="license-td">Microsoft Public License</td> </tr> <tr> <td colspan="4"> <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"> </div> </td> </tr> <tr> <td class="license-name-td">jQuery</td> <td class="license-td">1.10.2002</td> <td class="license-td">http://jquery.com</td> <td class="license-td">MIT License</td> </tr> <tr> <td colspan="4"> <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;"> </div> </td> </tr> <tr> <td class="license-name-td">jQuery Knob</td> <td class="license-td">11.2.8</td> <td class="license-td">http://anthonyterrien.com/knob</td> <td class="license-td">MIT License</td> </tr> </table> </div> </div> 

Answer 2

i've added a class name to my table and changed the class names to:

table.license-table td.license-td{
    text-align: left !important;
    margin-left:3px;
    word-break: break-word;
    width: 100px !important;
}

table.license-table td.license-name-td{
  text-align: left !important;
  word-break: break-word;
  overflow: hidden;
  width: 100px !important;
}

this solves my problem.

Answer 3

The problem is that the width: 100% also applies to the table. And because a all cells in a row must count up to the width of the table, it will not work to just restrict the width of the cell, you also must address the table, or the other cells in the row.

I do not know what your HTML looks like, but if the cell is the only one in the row, you could add a class to the table instead of the cell and set the width of the table to 100px in the same way as you did for the cell, you do not have to restrict the width of the cell than, as that will be automatically.