5

想知道提高效率的最佳方法是什么,也许是 jQuery。我可以接受不符合 ie7 的解决方案,如果需要,即使不支持 ie8 也可以。

<style type="text/css">
.cal {text-align:center}
.ral {text-align:right}
</style>
<table>
 <th>
  <td class="cal">center</td>
  <td>left</td>
  <td class="cal">center</td>
  <td>left</td>
  <td class="ral">right</td>
 </th>
 <tr>
  <td class="cal">center</td>
  <td>left</td>
  <td class="cal">center</td>
  <td>left</td>
  <td class="ral">right</td>
 </tr>
 <tr>
  <td class="cal">center</td>
  <td>left</td>
  <td class="cal">center</td>
  <td>left</td>
  <td class="ral">right</td>
 </tr>
</table>
4

4 回答 4

5

您可以使用 jQuery 在每行的第五个 td 中添加一个类,并设置该类的样式以使文本向右对齐。

或者(以及我这样做的方式)是使用第n 个子选择器

tr td:nth-child(odd) {
    text-align: center;
}

tr td:nth-child(5) {
    text-align: right;
}

它与 IE 8.0 不兼容,但它比基于 JavaScript 的解决方案简单得多。

于 2012-04-18T00:54:12.413 回答
3

这行得通吗?

table td { text-align: center; }
table td:last-child { text-align: right; }

不幸的是,IE8 不支持此功能。另一种选择是使用 JavaScript(例如 jQuery,因为你已经用它标记了这篇文章):

$(function(){ $('table tr').each(function(){ $('td:last', this).css({textAlign: 'right'}); } )}

这个问题似乎得到了很好的接受,尽管它是你能得到的最丑陋的黑客:使用 css 为表格中的最后一个 td 设置样式

最后,您可以稍微作弊,将最后一列的单元格作为一个<th>元素,然后使用以下命令轻松设置样式:

table th { text-align: right; }

它不一定在语义上是正确的,但它是另一种快速简便的选择。我假设<th>您原始帖子中的现有元素是拼写错误。

于 2012-04-18T00:53:56.970 回答
2
$('td:first-child').css('text-align', 'left');
$('td:nth-child(2)').css('text-align', 'center');
$('td:last-child').css('text-align', 'right');

有关其他过滤器,请参阅http://api.jquery.com/category/selectors/child-filter-selectors/

于 2012-07-26T18:39:45.580 回答
-1
<style>
td:first-child, td:first-child + td + td {
  text-align: center;
}
td:first-child + td + td + td + td {
  text-align: right;
}
</style>
<table>
<col align=center>
<col align=left>
<col align=center>
<col align=left>
<col align=right>

样式表适用于相当新的浏览器。我省略了将对齐设置为左的规则,因为这是 的默认设置td,但如果其他样式表可能影响对齐,您可能需要添加此类规则。

标签充当备份:根据col规范,它们使用的方法不应该工作,但实际上适用于旧版本的 IE(以及在 Quirks 模式下的较新版本)。

于 2012-04-18T06:26:06.047 回答