Question

我已经编写了一段时间的webapp并且所有布局，css工作正常。在过去一周左右的某个时间我做了一些改变，我绝对不知道我改变了什么导致了这个问题，我试着倒转代码没有运气。但我已经发现，如果我在表格中使用<th>代替<td>，问题就会消失。问题是有数千行代码需要修改，我正在使用这些表来显示从db读取的列数据。如果我可以避免将<td>代码更改为<th>，我会非常高兴。

我使用css来设置列名称的样式。任何人都可以解释为什么以下现在失败了它现在已经工作了8个月。我知道代码显然在某个地方发生了变化，但是我无知在哪里看......也许你的解释会让我知道在哪里查看我的代码。

这曾经工作但现在只在FIELD_name区域显示灰色文本： <td class="FIELD_name">Field Name:</td><td class="FIELD_text">small grey text here"</td>

如果我这样做，我会得到正确的显示（使用“th”而不是“td”）： <th class="FIELD_name">Field Name:</th><th class="FIELD_text">small grey text here"</th>

或者如果我使用这样的span标记，它也可以： <td><span class="FIELD_name">Field Name:</span></td><td class="FIELD_text">small grey text here"</td>

这是CSS：

.FIELD_name {
  font-family: Tahoma;
  font-size: 11px;
  font-style: normal;
  color: #135386;
  font-weight: bold;
}
.FIELD_text {
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  font-style: normal;
  color: #666666;
  font-weight: bold;
}

我希望它只是一个简单的代码修复...你的帮助表示赞赏。感谢。

Answer 1

正确的答案是计算元素样式的特殊性，并找出覆盖它的内容。

实用的答案是在firefox上安装firebug并找出超出你想要的定义的位置。

懒惰的答案是在此元素的样式表中的每个定义之后使用！important。

Answer 2

伙计们，感谢您的提示。我找到了罪魁祸首。我正在使用一个名为tablesorter的jquery插件来排序我的表。昨天我希望能够将我的表集中在一个div中，所以我实现了以下CSS，这样我的表就能正确居中（哪个有效）：

table { margin-left:auto; margin-right:auto; }

但是，这个css是在tablesorter插件css文件中找到的，这是“td”的问题所在。

table.tablesorter tbody td { color: #3D3D3D; padding: 4px; /*background-color: #FFF;*/ vertical-align: top; }

我不是一名CSS专家，基本上我多年来一直在破解我的方式，所以我知道我缺乏一些基本概念，但是你能解释一下tableorter实现这个问题的方式以及我如何改变我正在做css的方式，所以它不会覆盖事物？

如果你知道一个很好的指导教程可以帮助我更好地掌握CSS ...我会接受任何建议。

css不在表“td”中工作，但它适用于“那”......发生了什么？

2 个答案: