CSS 表格 - 跨行表格中居中对齐和左对齐的混合

Question

这是我当前的小提琴：

http://jsfiddle.net/UjAQf/106/

• 对于运动，状态、结果标题和列，我想居中对齐。
• 对于“Pick”、“Genius”和“Genius Credential”标题和列，我想左对齐。
• 对于“picksHeading”，我想左对齐。

最有效的方法是什么？

-- 代码：

<div class="geniusPicks">

    <table cellpadding="1" cellspacing="0">

        <thead>
            <tr id="picksHeading">
                <th>Sport</th>
                <th>Status</th>
                <th colspan="2">Pick</th>
                <th>Genius</th>
                <th>Genius Credential</th>
                <th>Result</th>
            </tr>
        </thead>

        <tbody>

            <tr class="bigGap">
                <td colspan="7"></td>
            </tr>

            <tr class="pickHeading">
                <td colspan="7">blah</td>
            </tr>
            <tr class="pickBody">
                <td rowspan="4">plah</td>
                <td rowspan="4">flah</td>
                <td rowspan="4">glah</td>
                <td>vlah</td>
                <td>mlah</td>
                <td>nlah</td>
                <td rowspan="4">jlah</td>
            </tr>
            <tr class="pickBody">
                <td>clah</td>
                <td>dlah</td>
                <td>xlah</td>
            </tr>
            <tr class="pickBody">
                <td>plah</td>
                <td>slah</td>
                <td>klah</td>
            </tr>
            <tr class="pickBody">
                <td>qlah</td>
                <td>wlah</td>
                <td>zlah</td>
            </tr>

            <tr class="smallGap">
                <td colspan="7"></td>
            </tr>

            <tr class="pickHeading">
                <td colspan="7">blah</td>
            </tr>
            <tr class="pickBody">
                <td rowspan="4">plah</td>
                <td rowspan="4">flah</td>
                <td rowspan="4">glah</td>
                <td>vlah</td>
                <td>mlah</td>
                <td>nlah</td>
                <td rowspan="4">jlah</td>
            </tr>
            <tr class="pickBody">
                <td>clah</td>
                <td>dlah</td>
                <td>xlah</td>
            </tr>
            <tr class="pickBody">
                <td>plah</td>
                <td>slah</td>
                <td>klah</td>
            </tr>
            <tr class="pickBody">
                <td>qlah</td>
                <td>wlah</td>
                <td>zlah</td>
            </tr>

            <tr class="smallGap">
                <td colspan="7"></td>
            </tr>

        </tbody>

    </table>

</div>

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

Answer 1

您可以向您想要居中的单元格添加类，或者这可能适合您，

工作示例

添加 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 使用 相邻同级选择器位于两个位置

1. .pickHeading+tr - 这只针对 tr 行中的单元格，该行是 tr 的直接同级code>pickHeading 行 - 这是您的 7 个单元格的行，这意味着只有 3 个单元格的较小行永远不会成为目标，并且默认位于左侧

2. td - 定位每个单元格

   td+td+td+td+td+td+td - 定位前面有 6 个其他单元格的每个单元格 (7)

   td+td+td - 定位前面还有另外 2 个单元格的每个单元格 (3,4,5,6,7)

因此上面 #2 中的最后一个示例会否决单元格 3 4 5 和 3 4 5 。 6，但不是 7，因为上面的第二个示例更具体

它可能可以使用 :nth-child 来完成，但 IE7 支持这种方式，并且需要少一条规则！