Question

想知道用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>

Answer 1

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

或者（以及我的方式）使用nth child selector。

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

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

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

Answer 2

这会有用吗？

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'}); } )}

这个问题似乎已被广泛接受，尽管你可以得到一个丑陋的黑客：Styling the last td in a table with css

最后，您可以作弊一点，将最后一列的单元格作为<th>元素，然后使用以下方式轻松设置样式：

table th { text-align: right; }

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

Answer 3

$('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/

Answer 4

<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模式下的较新版本）。 / p>

是否可以在不指定每行中的类的情况下对表列进行全局文本对齐？

4 个答案: