覆盖html表td样式

时间：2015-04-23 12:07:37

标签： html css

我正在尝试覆盖这样的td样式：

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

所以我这样做了：

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

该表始终采用＆＃34;全球＆＃34;风格和覆盖，而忽略了我的风格。即使是铬也没有穿过链接，它只是忽略了那一部分。 

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

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

（Chrome计算的CSS输出）

之后是否有特殊的方法来覆盖td标签？

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

3 个答案:

答案 0 :(得分：5)

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

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

您需要将分隔符td的{​​{1}}重置为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>

答案 1 :(得分：0)

我已经在我的表中添加了一个类名，并将类名更改为：

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

这解决了我的问题。

答案 2 :(得分：-2)

问题是width: 100%也适用于表格。并且因为一行中的所有单元格必须计算到表格的宽度，所以不能仅限制单元格的宽度，还必须对表格或行中的其他单元格进行寻址。

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

相关问题
最新问题