覆盖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为分离td[colspan="4"]到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>