Question

我为这个问题制作了一个简单的HTML表格。

我想为文字设置不同的样式，为<td>和<tfoot>中的数字设置不同的样式。

我可以使用与<td>和<tfoot>中的数字不同的方式设置文字的样式吗？

和

网络练习中为更复杂的表格设置样式的最佳方法是什么？

更新

喜欢这个吗？

<td> 12<b>x</b>6 </td>

Here is my fiddle.

HTML

<table>
    <caption>Woah</caption>
    <thead>
        <tr>
            <th></th>
            <th>Animalistic</th>
            <th>People</th>
        </tr>
    </thead>
    <tfoot>
        <td>Run</td>
        <td>1 x 92</td>
        <td>1 x 92</td>
    </tfoot>
    <tbody>
        <tr>
            <td>John</td>
            <td>9889 x 92</td>
            <td>9889 x 92</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Bill</td>
            <td>9889 x 92</td>
            <td>9889 x 92</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width:300px;
    background:#f5f7f3;
}
caption {
    background:#000;
    color:#fff;
}
th {
    border:1px solid #000;
    height:40px;
    background:#b2b2b2;
}
td {
    border:1px solid #b2b2b2;
}

Answer 1

添加＆lt; span＆gt;使用您想要的样式标记文本。

<td><span style="some style" or class = "some  class"> some text </span></td>

Answer 2

如果数字值和文本位于同一标记中，则无法为数值和文本设置不同的颜色。你必须给他们单独的标签。像：

<td><span>1</span> text <span>92</span></td>

然后添加css：

td span{
    color:red;
}

注意：数字值位于span标记中，文本值不具备任何值标签。所以使用这个css我们可以为数值和文本设置颜色价值不同

Answer 3

有许多方法可以定位表元素。 Here is an excellent list of available CSS selectors.

Example of the below

基本HTML结构（只有一个<tbody>）：

<table>
  <thead>
    <tr>
       <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>9999 x 9999</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
       <td></td>
    </tr>
  </tfoot>
</table>

要单独定位数字，请使用<span>：

<td>9999 <span>x</span> 9999</td>

OR

<td><span>9999</span> x <span>9999</span></td>

在CSS中定位：

tbody td span {
  /* styles */
}

使用nth-child：

定位tbody中的每隔一行

tbody tr:nth-child(even) { 
    background: #F00; 
}

定位tbody中的每个td：

tbody td {
    text-align: center;
}

定位每一行的第一个td：

tbody td:first-child {
    text-align: right;
}

瞄准tfoot本身

tfoot {
    background: #CCC;
}

使用CSS的表样式

3 个答案: