html - テーブル グループを一貫してカスタマイズする方法

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を 1 つのものとして扱います。つまり、クラスでこの列をカスタマイズしたくありません。

遊ぶ

ここをクリックして jsFiddle で再生

Answer 1

私があなたを正しく理解していれば：

table {
    border-collapse: collapse;
}

フィドル

border-collapse の詳細。

Answer 2

使用できますcolgroup：

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

これで、xbox360クラスが列全体に 1 つとして適用されます。ただし、col-colgroup を使用して適用できるスタイルはごくわずかであることに注意してください。width、text-alignなどだと思います。

編集：

スペースの削除に関するコメントの後：テーブル上と組み合わせborder-collapse: collapse;ます（他の人が提案したように）。

フィドルを確認してください: http://jsfiddle.net/DXm69/4/

列をグループ全体として扱うことに関する最初の質問については、colgroup（クラスとともに）が最良の選択肢です。

Answer 3

使用する：

<table cellspacing="0">