首先做了一个表格，如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .t-table{
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <table  class="t-table" border="1px solid #000" cellpadding="0" cellspacing="0">
            <thead>
                <th>first</th>
                <th>second</th>
                <th>third</th>
                <th>fourth</th>
            </thead>
            <tr>
                <td rowspan="3">1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>9</td>
                <td>10</td>
            </tr>
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
            </tr>
        </table>
    </div>
</body>
</html>

在页面效果如下：

现在有一个很重要的需求，要求 third 和 fourth 两列居中。

考虑使用 :nth-child() 给一个 text-align:center 来控制

于是加了一段 css 样式如下：

    <style type="text/css">
        .t-table{
            width: 200px;
        }
        .t-table td:nth-child(2){
            text-align: center;
        }
    </style>

希望第二列居中，

浏览器展示如下：

发现居然错位了！！   很难过。。。

想了想应该是 rowspan 导致第2、3行的第一列没有，即从 second 开始为第一列！

知道原因以后只能放弃 :nth-child 考虑给第二列开始给一个 class，再用兄弟选择器实现。。

页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .t-table{
            width: 200px;
        }
        .t-td,
        .t-td ~td
        {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <table  class="t-table" border="1px solid #000" cellpadding="0" cellspacing="0">
            <thead>
                <th>first</th>
                <th>second</th>
                <th>third</th>
                <th>fourth</th>
            </thead>
            <tr>
                <td rowspan="3">1</td>
                <td class="t-td">2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td class="t-td">5</td>
                <td>6</td>
                <td>7</td>
            </tr>
            <tr>
                <td class="t-td">8</td>
                <td>9</td>
                <td>10</td>
            </tr>
            <tr>
                <td>11</td>
                <td class="t-td">12</td>
                <td>13</td>
                <td>14</td>
            </tr>
        </table>
    </div>
</body>
</html>

展示效果如下：