0

I have the string "Total (incl.tax) $2.81"

in a table's cell:

<table>
    <body>
        <tr>
            <td>Total (incl.tax) $2.81</td>
        </tr>
    </body>
</table>

I need to style it so that the "(incl.tax)" part is 2px smaller than the rest of the line. I've search StackOverflow and other sites, and have not found an answer to my question:

How would I go about doing this with css?

I don't want to change the text in any other way, otherwise I could have used something similar to this:

<td style="font-size: 15px">Total <em style="font-size: 13px">(incl.tax)</em> $2.81</td>
4

7 回答 7

4

你可以使用 span

<td>Total <span style="font-size:10px;">(incl.tax)</span> $2.81</td>

同样地

于 2013-07-30T11:28:50.800 回答
3 
<table>
    <tbody>
        <tr>
            <td>Total <small>(incl.tax)</small> $2.81</td>
        </tr>
    </tbody>
</table>

然后，您可以定位<small/>要细化的元素：

td small { font-size: 80%; }

另请注意，我已更正您的代码中的一个错误：<body>应该是<tbody>

于 2013-07-30T11:30:16.210 回答
1

使用此代码：

<td>Total <span style="font-size:9px;">(incl.tax)<span> $2.81</td>

根据您的代码给出字体大小。使它变小2px。

于 2013-07-30T11:29:28.157 回答
1

在（incl.tax）之前添加跨度标签并给出css跨度标签

于 2013-07-30T11:29:40.473 回答
0

使用以下样式：

<style>
    .largefontdemo {
          font-size: 20px;
    }
    .smallfontdemo{
        font-size: 10px;
    }
</style>

HTML：

<table class="largefontdemo">
    <tbody>
         <tr>
            <td>Total <span class="smallfontdemo">(incl.tax)</span> $2.81</td>
        </tr>
    </tbody>
</table>

还有一件事，而不是body在你的 html for table，你必须写 tbody

于 2013-07-30T11:34:01.477 回答
0

如果不以某种方式更改内容，就无法实现这一点，因为在 CSS 中，您只能设置元素和伪元素的样式，而括号表达式本身并不构成元素或伪元素。

但是，您可以使用简单的 JavaScript（或 jQuery）代码来更改内容客户端，该代码处理相关元素，识别括号表达式，并在它们周围包装合适的标记（最合乎逻辑和健壮的：<small>和</small>）。细节将取决于内容的确切格式和文档的结构以及需要考虑哪些单元格。

（em在三个理由上使用不会是最佳的：它在逻辑上意味着强调，并且该文本应该“不强调”而不是强调；它将默认渲染更改为斜体；它不会更改默认渲染中的字体大小，small不像.)

于 2013-07-30T12:09:04.480 回答
-3

尝试这个

HTML

<table>
    <body>
        <tr>
            <td>Total <span>(incl.tax)</span> $2.81</td>
        </tr>
    </body>
</table>

CSS

td > span{
    font-size:2px;
}
于 2013-07-30T11:29:10.263 回答