Question

下面链接的JSFiddle我的问题会变得更加明确。

我希望每个人都不会在它所在的表格单元格中居中（高度方向）。

此处示例显示了我的问题：http://jsfiddle.net/qc1st2t9/

那么，当表格单元格比无序列表中的内容高得多时，如何使用CSS来防止在单元格内部居中？

以下是我可能不想访问jsfiddle的代码：

HTML：

<table>
    <tr>
        <td colspan="4">Events(1) | Covered Amount: 25/79 | Percent Covered: 32%</td>
    </tr>
    <tr>
        <td>first</td>
        <td>second</td>
        <td>third</td>
        <td>fourth</td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>test</li>
            </ul>
        </td>
        <td>
            <ul>
                <li>test</li>
            </ul>
        </td>
        <td>
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </td>
        <td>
            <ul></ul>
        </td>
    </tr>
</table>

我尝试使用CSS（我已经删除了以负面方式影响这一点的规则）：

    table {
        border-collapse: collapse;
        text-align:left;
        width:100%;
        margin:auto;
    }
    th, td {
        border: 1px solid #cecfd5;
        padding: 10px 15px;
        height:25px;
        max-height:50px;
        text-align:left;
        width:25%;
        font-weight: normal;
    }
    th > div {
        max-height:50px;
        overflow-y:scroll;
        overflow-x:hidden;
        text-align:left;
    }

Answer 1

使用CSS：vertical-align: top。请参阅vertical align spec。

演示：http://jsfiddle.net/qc1st2t9/1/

如何停止在表格单元格内居中？

1 个答案: