Question

目标

始终如一地自定义表组。

问题

我的申请表上有以下表格：

<table>
    <thead>
        <tr>
            <td></td>
            <td class="xbox360"><strong>Xbox 360</strong></td>
            <td><strong>PS3</strong></td>
            <td><strong>Xbox One</strong></td>
            <td><strong>PS4</strong></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>Market A</strong></td>
            <td class="xbox360">US$299,00</td>
            <td>US$329,00</td>
            <td>US$499,00</td>
            <td>US$399,00</td>
        </tr>
        <tr>
            <td><strong>Market B</strong></td>
            <td class="xbox360">US$289,00</td>
            <td>US$319,00</td>
            <td>US$489,00</td>
            <td>US$389,00</td>
        </tr>
    </tbody>
</table>

我需要的是简单：将列xbox360视为一件事。换句话说，我不希望类自定义此列。

播放

Click here to play on jsFiddle

Answer 1

如果我理解正确的话：

table {
    border-collapse: collapse;
}

FIDDLE

更多关于border-collapse。

Answer 2

您可以使用colgroup：

<table>
    <colgroup>
        <col />
        <col class="xbox360" />
        <col />
        <col />
        <col />
    </colgroup>
    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>
</table>

现在，您的 xbox360 类将作为一个整体应用于整个列。但是，请注意，使用col-colgroup只能应用几种样式。我认为宽度，文本对齐等。

修改：

关于删除间距的评论之后：将其与表格上的border-collapse: collapse;相结合（按照其他人的建议）。

检查小提琴：http://jsfiddle.net/DXm69/4/

关于将列作为一个整体处理的原始问题，colgroup（以及类）是最佳选择。

Answer 3

使用：

<table cellspacing="0">

如何一致地自定义表组

目标

问题

播放

3 个答案: