覆盖 HTML 表格 TD 样式

我试图覆盖这样的 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>

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

首先，在您的示例代码中，我添加了两个封闭的div （ .valuator ， .sw-slots ），以便第一个 CSS 规则应用于表。

之后，您需要确保表格单元格的宽度设置为默认值auto，宽度为 100px 的td.license-name-td除外。

您需要将分隔符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>

我在表中添加了类名并将类名更改为：

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

这解决了我的问题。

问题是width: 100%也适用于表。而且由于行中的所有单元格都必须计算到表格的宽度，因此仅限制单元格的宽度是行不通的，您还必须处理表格或行中的其他单元格。

我不知道您的 HTML 是什么样子的，但如果单元格是行中唯一的单元格，您可以向表格而不是单元格添加一个类，并以与单元格相同的方式将表格的宽度设置为 100px，您不必限制单元格的宽度，因为这将自动进行。

相关内容

最新更新

热门标签：