覆蓋html表td樣式

Question

我試圖覆蓋這樣的td樣式：

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

所以我這樣做了：

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

該表始終采用“全局”風格並覆蓋，而忽略了我的風格。 即使是chrome也沒有穿過鏈接，它只是忽略了那一部分。

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

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

（Chrome計算的css輸出）

之后是否有一種特殊的方法來覆蓋td標簽？

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

編輯：我改變了一個錯誤，我忘了將一個內聯樣式更改為一個類，現在這是新結果。

Answer 1

首先，在您的示例代碼中，我添加了兩個封閉的div （ .valuator ， .sw-slots ），以便第一個CSS規則適用於該表。

之后，您需要確保表格單元格的寬度設置為默認值auto但td.license-name-td的寬度為100px。

您需要將分隔符td[colspan="4"]的td重置為width: auto ，然后將td.license-td為相同。

我想這就是你需要的。 只是留意可能在小時樣式表中可能覆蓋這些規則的其他CSS規則。

 .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

我已經在我的表中添加了一個類名，並將類名更改為：

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

這解決了我的問題。

Answer 3

問題是width: 100%也適用於表。 並且因為一行中的所有單元格必須計數到表格的寬度，所以不能僅限制單元格的寬度，您還必須處理表格或行中的其他單元格。

我不知道您的HTML是什么樣的，但如果單元格是行中唯一的單元格，您可以在表格而不是單元格中添加一個類，並將表格的寬度設置為100px ，方法與您的方法相同對於單元格，您不必限制單元格的寬度，因為它將自動限制。