Question

我在HTML表格下方。

<table id="tabla" align="center" cellspacing="15" cellpadding="0">
    <tr>
        <td><input type="button" value="Form View"></input></td>
        <td><input type="button" value="Table view"></input></td>
    </tr>
    <tr>
        <td>Classification1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td>Classification1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td>Classification1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td>Classification1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
</table>

这里每行有多个tds。我想将标签名称更改为粗体而不是值。我怎么能这样做？

前：

<td>Classification1:</td>
 <td>value</td>

此处Classification1:应为粗体，value应为正常。

Answer 1

简单的CSS解决方案：

#tabla tr td:nth-child(2n-1) {
   font-weight: bold;
}

Answer 2

表格是这项工作的错误工具！

这有两个原因：

辅助功能 - 使用屏幕阅读器的视障人士可以更轻松地使用您的网站。
搜索引擎将能够更轻松地解析网站。

使用数据定义列表：

 <dl>
      <dt>Classification1:</dt>
      <dd>value</dd>

      <dt>Source:</dt>
      <dd>value</dd>

      <dt>Sic1:</dt>
      <dd>Value</dd>

      <dt>Sic Description1:</dt>
      <dd>value</dd>

      <dt>Source:</dt>
      <dd>value</dd>
</dl>

CSS：

dt, dd {margin-right:10px;margin-left:10px;}
dt {font-weight:bold;}

dl>dd, dl>dt {float:left}
dl:after {clear:both;float:none;display:block;content:'';}

这是在这个小提琴中复制的：http://jsfiddle.net/netinept/GsG7C/9/

Answer 3

td:nth-child(odd) {
  font-weight:bold
}

使用它 Link

Answer 4

在表名前添加标签

      <td><b>classification</b></td>

Answer 5

使用CSS3 :nth-child(odd)或:nth-child(even)以及后备jQuery

CSS3：

tr td:nth-child(odd) {
         font-weight:bold;
       }

注意：nth-child在IE中不支持。

<强> jQuery的：

$(document).ready(function()
{
  $("tr td:odd").css("font-weight", "bold");
});

JSFiddle

改变HTML表的字体样式？

5 个答案: