增加表格的1个单元格的字体大小

时间:2014-07-21 11:57:23

标签: html css fonts

如果我有一个td,并且需要在应用所有样式后将该特定单元格的字体增加X点,我该怎么做?我不需要在CSS中执行此操作。我的意思是,如果我只是在td标签中添加一些东西,我就没事了 我没有粘贴代码,因为它是现有页面的一部分(复杂),我感兴趣的是只修改表格的1个单元格

更新
我的问题是如何在不使用绝对字体的情况下增加特定单元格的字体大小

4 个答案:

答案 0 :(得分:1)

最简单的方法是向您的单元格添加classid

您可以使用课程:<td class='thisOne'>或身份<td id='thisOne'>,并使用.thisOne { font-size: 1.2em; }#thisOne{ font-size: 1.2em; }设置样式。

如果您无法更改HTML,则可以使用structural pseudo-classes

一些例子:

tr:nth-child(5) td:nth-child(2) { font-size: 1.2em; } // fifth row, second cell
tr:first-child td:last-child { font-size: 1.2em; } // first row, last cell

答案 1 :(得分:1)

我建议使用css。像这样在td和css中添加一个类;

    td.myclass {
font-size: 1.5em;
}

Alternativeley你可以添加如下的内联样式;

<td style="font-size:1.5em;">Text here</td>

答案 2 :(得分:1)

单独使用CSS是不可能的。使用font-size: calc(100% + 5px)(假设X等于5;请参阅MDN on calc)最接近,但此处100%指的是父元素的字体大小,而不是所有CSS确定的元素本身的字体大小涉及的规则。

可以在JavaScript的帮助下完成,但是您需要使用getComputedStyle方法,这是所有浏览器都不支持的方法。如果您可以忽略IE 8及更旧版本或以其他方式处理它们,您可以使用如下代码(假设为简单起见,您不使用JavaScript):

<table>
<tr><td>foo
<td id=xyz>foo
</table>
<script>
window.onload = function() {
  var cell = document.getElementById('xyz');
  var size = getComputedStyle(cell, null).getPropertyValue('font-size');
  cell.style.fontSize = (parseInt(size) + 5) + 'px';
}
</script>

这只是找出计算出的字体大小值(以px为单位)获取数值,添加所需的增量,附加px,并设置单元格的字体大小。

答案 3 :(得分:0)

您可以将样式添加到单元格,如下所示:

<td style="font-size:150%">cell Information here..</td>

您可以将150更改为您想要的任何值。