1

目标

一致地自定义表组。

问题

我的应用程序有下表：

<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视为一件事。换句话说，我不希望一个类来自定义这个列。

玩

点击这里在 jsFiddle 上玩

4

3 回答 3

4

如果我理解正确：

table {
    border-collapse: collapse;
}

小提琴

更多关于border-collapse 的内容。

于 2013-08-05T14:26:41.410 回答
1

您可以使用colgroup：

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

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

编辑：

在您对删除间距发表评论后：将其与border-collapse: collapse;on table 结合起来（如其他人所建议的那样）。

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

至于您关于将专栏视为一个整体的原始问题，colgroup（与班级一起）是最好的选择。

于 2013-08-05T14:25:18.083 回答
1

利用：

<table cellspacing="0">
于 2013-08-05T14:28:00.467 回答