3

CSS で設定された 12px の境界半径を持つテーブルを作成しようとしています。テーブル内の tr または td に境界線はなく、ロット全体を囲む 1 つの境界線だけです。テーブルの最初の行には、上の 2 つのコーナーに境界線の半径を設定しますが、下の 2 つのコーナーには設定しません (テーブルのヘッダーのようなものです)。ただし、これはテーブルとこの最初の行の間に白い境界線を作成しています-ヘッダー行の背景が色付きであるため、白い境界線なしでそれらを互いにぴったり合わせたいです。

これを行うためにボーダーコラプスを使用しようとしましたが、これによりテーブル全体のボーダー半径がキャンセルされ、ヘッダー行が上の 2 つのコーナーで丸められますが、四角いテーブルの内側になります。

これを説明するのは非常に難しいため、ここに例を示します。テーブルと青い背景の行の間に白い境界線が表示されます。

国境崩壊なしで国境を取り除く方法を知っている人はいますか? 前もって感謝します

4

2 に答える 2

6

これを試して：

<table class="admin" style = "border-spacing:0px;">

明らかに、そのインライン スタイルを独自のクラスに引き出すことができますが、テーブルの境界線の間隔が目的であることを明示的に示したかったのです。

テキストをテーブルの境界線にぴったりと合わせたくない場合は、テーブル内のコンテンツにパディングを追加する必要があります。

于 2012-10-24T18:43:37.190 に答える
0

ここに私のcssと修正があります：

table {
    border:1px solid black;
    border-radius: 5px; //Any radius you want. It will work perfectly!
    border-spacing: 0;
}
table td:first-child, table td:not(:first-child):not(:last-child){
    border-right:1px solid black;
}
table tr:first-child td, table tr:not(:last-child) td {
    border-bottom:1px solid black;
}

table thead tr:first-child  td:first-child {
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;
}

table thead tr:first-child  td:last-child {
    -webkit-border-top-right-radius:2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
}
table tbody tr:last-child  td:first-child {
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;
}

table tbody tr:last-child  td:last-child {
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;
}
于 2013-05-02T13:24:15.100 に答える