覆盖HTML表格的td样式

Ipad 发表于 Dev

平板电脑

我正在尝试覆盖这样的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>

编辑：我更改了一个错误，我忘记将一种内联样式更改为一类，现在这是新的结果。

马克·奥德（Marc Audet）

首先，在你的示例代码，我加入了这两个封装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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。