0

だから私はテーブルをスタイリングしています、そして私はテーブルの見出しのためにかなり派手な下線を付けたいと思います。

私は一生懸命でインターネットを調べましたが、何も見つかりませんでした。

これはテーブル構造です：

<table>
    <thead>
        <tr>
            <td>Number</td>
            <td>Name</td>
            <td>Address</td>
        </tr>
    </thead>

    <tbody></tbody>
</table>

そして私の現在のスタイリング：

table {
    width: 100%;
}

    table thead {
        font-weight: bold;
    }

        table thead td {
            margin-right: 5px;
            border-collapse: separate;
            border-spacing: 10px 5px;
            border-bottom: 2px solid #427AA8;
        }

    table tbody {
        font-size: 90%;
    }

        table tbody tr {
            line-height: 2em;
            border-bottom: 1px solid #CCC;
        }

        table tbody td {
            padding: 0 5px;
        }

コードのjsfiddleは次のとおりです：http：//jsfiddle.net/tYA4e/1/

私が探しているのは、列の間の境界線の切れ目ですが、それはtheadだけです。

そして私が達成しようとしていることの例：http：//i.imgur.com/OHrhJ.jpg

簡単な方法でこれを実現する方法はありCSSますか？

4

2 に答える 2

4

境界線は必然的に、その要素の幅全体に拡張されます。したがって、境界線を要素の幅全体に部分的にのみ拡張するには、その境界線を子要素に適用し、それに応じたサイズにする必要があります。

そうは言っても、これを達成できる唯一の方法は、要素をtd(この場合は a span) 内にネストし、次の CSS を使用することです。

table thead td span {
    display: inline-block;
    width: 80%;
    border-bottom: 2px solid #427AA8;
}

JS フィドルのデモ。

余談ですが、表の見出しについてはth、この場合は (table-heading) 要素を使用する方が適している可能性があることに注意してください。

さらに考えてみると、もちろん、スタイル付き要素を使用することも可能です。これにより、この例では親の右端まで拡張できるという点で、 の幅hrをピクセルレベルで制御できます) :hr10pxtd

table thead td hr {
    width: 80%;
    margin: 0 10px 0 0;
    border-bottom: 2px solid #427AA8;
}

JS フィドルのデモ。

于 2012-07-05T14:17:09.540 に答える
1

見出しセルに th を使用することもできます -> 行を thead と tbody でグループに分ける必要がなくなります - マークアップと CSS が少なくなります。

<table>
    <tr>
        <th>headlinecell</th>
    </tr>
    <tr>
        <td>contentcell</td>
    </tr>
</table>

th と td をスタイルするだけです。

于 2012-07-05T14:22:58.660 に答える