Html CSS表格-行跨距表格中左对齐的混合

这是我现在的小提琴：

• 对于“运动”、“状态”和“结果”标题和列，我希望居中对齐
• 对于Pick、Genius和Genius凭证标题和列，我想左对齐
• 对于“Picksheding”，我想左对齐

最有效的方法是什么

-- 代码：

---

您可以向想要居中的单元格中添加类，也可以这样做

CSS添加了：

.geniusPicks table th,
.geniusPicks table th+th+th+th+th+th,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {
    text-align: center;
}

.geniusPicks table th+th+th,
.geniusPicks table .pickHeading+tr td+td+td {
    text-align: left;
}

这个CSS在两个地方使用了

.pickHeading+tr

-这只针对行

tr

中的单元格，该行是

pickHeading

行的直接同级行-这是您的7个单元格行，这意味着较小的行（只有3个单元格的行）永远不会成为目标，并保留为默认左侧

td

-针对每个单元

td+td+td+td+td+td+td+td+td

-针对前面有6个其他小区的每个小区（7）

td+td+td

-针对前面有2个其他单元格的每个单元格（3,4,5,6,7）

因此，上面第2个例子对单元格3、4、5和6无效，但对单元格7无效，因为上面第2个例子更具体

---

这可能是通过

：n个child

来完成的，但这种方式受IE7支持，需要少一条规则

这是一个问答论坛。你的非主观问题是什么？我们如何定义效率？CSS解析时间？用于对结果进行编码的字符数？查看代码/结果时的温暖模糊程度？您的意思是要向左对齐的部分的水平对齐吗？另外，

垂直中心

，和

垂直左

的确切意思是什么？它们是非常模棱两可的短语。你的意思是水平向左和垂直居中吗？我自己也不太清楚

垂直居中

+

垂直向左

。

.geniusPicks {}

.geniusPicks table {width:100%; font-size:12px;}

.geniusPicks table tr#picksHeading {border:1px solid; background-color:red; height:30px;}

.geniusPicks table tr.pickHeading {border:1px solid;}

.geniusPicks table tr.pickBody td {border:1px solid;}

.bigGap td {height:19px;}

.smallGap td {height:10px;}

.geniusPicks table th,
.geniusPicks table th+th+th+th+th+th,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {
    text-align: center;
}

.geniusPicks table th+th+th,
.geniusPicks table .pickHeading+tr td+td+td {
    text-align: left;
}