html - colgroupのアウトライン境界線を取得するにはどうすればよいですか？

Question

3つの列グループに分割された17列のテーブルがあります。CSSを使用して背景色を設定できます。これは、CSSセレクターが正常であることを示しています。ただし、各colgroupの外側に境界線を設定することはできません。

最初に私はこのCSSを試しました：

colgroup.inbound, colgroup.outbound {
    background-color: #eeeeee;
    border: 1px solid red;
}

そして、次のように列グループを定義しました。

<colgroup span="2"></colgroup>
<colgroup span="12" class="inbound"></colgroup>
<colgroup span="3" class="outbound"></colgroup>

次に、このCSSを試しました。

col.inbound, col.outbound {
    background-color: #eeeeee;
    border: 1px solid red;
}

そして、このようにグループを定義しました。

<colgroup
    <col span="2">
    <col span="12" class="inbound">
    <col span="3" class="outbound">            
</colgroup>

どちらの場合も、背景色は有効になりますが、境界線は有効になりません。私が見ることができる唯一の境界線は、すべてのセルの間の細い白い線です（グループ全体の周りではありません）。

私はテーブルrules属性を知っていますが、これは使用したくありません。CSSの使い方がわかれば、CSSの柔軟性が増すと思います。

score 13 · Accepted Answer

テーブルを使用するときに境界線を機能させるには、テーブルに次のルールを設定する必要があります

table.collapsed{
  border-collapse:collapse;
}

あなたがふりをするときにあなたはあなたの国境を取得します

ここに画像の説明を入力してください

col.inbound, col.outbound {
    background-color: #eeeeee;
    border: 1px solid red;
}

オプション 各列ではなく、グループ全体の境界線

ここに画像の説明を入力してください

次に、colsの代わりにcolgroupをそのように支配する必要があります。

colgroup.inbound  {
  border: 1px solid #ff0000;
}

ボーダー崩壊を使用することを常に忘れないでください！これはこのJsBinで見ることができます

1 に答える 1