Question

我有100行，但我不想单独指定类abc1，abc2，abc3，abc4 ......

是否可以自动将类分配给TD，具体取决于列号，即第1列 - abc1 第2栏 - abc2 ..等

<Table>
 <tr class="odd">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

<tr class="even">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

<tr class="odd">
   <td class="abc1"> ...</td>
   <td class="abc2"> ...</td>
   <td class="abc3"> ...</td>
   <td class="abc4"> ...</td>
 </tr>

</table>

感谢任何帮助。

嗯...感谢所有答案Guys ..看起来没有办法通过CSS做到这一点。是的，我刚把它添加到服务器html ..但我只是在寻找能否避免这种情况。

我不想用javascript做这件事。感谢你的回答againg Guys !!!!!!!!

感谢您的帮助。

谢谢，本

Answer 1

使用<colgroup>和<col>标记实际支持HTML和CSS中的列：请参阅http://htmldog.com/guides/htmladvanced/tables/
在表格的开头添加：

<table>
  <colgroup>
    <col class="class1" />
    <col class="class2" />
    <col class="class3" />
    <col class="class4" />
  </colgroup>
  ...
</table>

Answer 2

你可以用Javascript或像jQuery这样的框架来做到这一点，但是，自己走下去，我不愿意。原因是速度：我正在使用jQuery进行奇偶行样式，并且需要100-500ms来加载页面（在它和其他几个之间）。对于可以在服务器上完成的事情，这是（imho）不可接受的长度。

如果你准备好接受它，那就去吧。 CSS有一个：nth-child（n）选择器，但在IE6中不支持。就个人而言，我会在服务器端生成类作为HTML的一部分。

使用jQuery，你可以这样做：

<script type="text/javascript">
$(function() {
  $("table tbody tr :first-child").addClass("abc1");
  $("table tbody tr :nth-child(2)").addClass("abc2");
  // etc
});
</script>

jQuery的优点是它使用CSS2.1和一些CSS3和自定义选择器，但它不关心浏览器支持什么，因为它支持浏览器不支持的内容。

Answer 3

如果您需要跨浏览器解决方案，但如果不支持Internet Explorer，则可以使用：nth-child规则。请参阅here和here。您也可以使用JavaScript库，例如jQuery。

Answer 4

有col和colgroup xhtml标签了解他们。

此外，还有：

#your-table tr td:first-child     //will target first td
#your-table tr td:first-child+td //will target the all the second td
#your-table tr td:first-child+td+td //will target the all the thired td

你得到漂移

Answer 5

是 - 如果您使用的是PHP或ASP.NET等服务器端语言。这是PHP中的解决方案，假设只有100列：

for( $i=0; $i < 100; $i++ )
{
    echo "<td class=\"abc$i\">your content here.</td>";
}

由于PHP将解析字符串并插入PHP变量的文字值，因此该循环的每次迭代都会使您的类增加$ i的值，即abc0，abc1，abc2等。

这将完成你想要的。但是，我意识到我不知道你在构建什么，但我质疑设计决定需要100列，每列必须采用不同的样式。我很想看到你的最终实施。

KN

如何将类分配给列

5 个答案: