0

3 つの別々の Web サイトへのログイン ポータルであるページを作成しました。このページでは、上記の Web サイトへの 3 つのログイン ポータルを表示しました。CSS とできるだけ少ないクラスですべてのスタイルを設定しようとしています (CSS スキルを微調整する必要があります)。

私が作成したのは、loginPortals と呼ばれる 3 つの行と 2 つの列を持つテーブルです。

<table class="loginPortals">
    <tbody>
        <tr>
            <td>Picture 1</td>
            <td>Login form 1</td>
        </tr>
        <tr>
            <td>Picture 2</td>
            <td>Login form 2</td>
        </tr>
        <tr>
            <td>Picture 3</td>
            <td>Login form 2</td>
        </tr>
    </tbody>
</table>

テーブルのスタイリングを始めたばかりなので、非常に不完全ですが、すでに苦労しています。どのように見えるか正確にはわからないので、これは単純化されています。基本的には、各行の間に表示される何らかの境界線が必要です。私が望んでいたように、以下はこれを完全に達成しません:

.loginPortals{
    width:100%;
}
    .loginPortals tbody:first-child td{
        border-top:1px solid #000;
    }
    .loginPortals tbody tr td{
        border-bottom:1px solid #000;
        padding:1em 0;
    }

私が思っていたように、最初の子セレクターが機能していません。すべての行のすべてのセルに上罫線を適用しています。これにより、行の中央で線の太さが 2 倍になります。

追加のクラスを作成したり、インライン スタイルを適用したりせずに、上の境界線が一番上の行にのみ適用されるようにするにはどうすればよいですか。

ありがとうございました！
ジョー

4

4 に答える 4

7

テーブルの境界線を折りたたむように設定する必要があります:

.loginPortals{
    width:100%;
    border-collapse: collapse;
}

次に、ルールを省略して:first-child、すべての行に上下の境界線を適用するだけです。

.loginPortals tbody tr td{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:1em 0;
}

また、参考までに、このセレクターは次のとおりです。

.loginPortals tbody:first-child td

意味：

親の最初の子である 内の任意のtd要素を選択します。
tbody

そしてそうではありません：

の最初の子内の任意のtd要素を選択します。
tbody

したがって、tbodyは の最初で唯一の子であるため、すべての親.loginPortalsのすべてのtd要素が選択されます。視覚的な説明については、この回答trを参照してください。おそらく、このセレクターが必要でした:

.loginPortals tbody tr:first-child td

ただし、テーブルの境界線を折りたたむだけなので、これは必須ではありません。

于 2012-04-24T16:16:21.507 に答える
1

私が正しく理解していれば、3 つのフォームがあり、2 行だけが必要ですI want a border of some sort appearing between each row。

.loginPortals tr:first-child td{
    border-top:none;
}
.loginPortals tbody tr td{
    border-top:1px solid #000;
    padding:1em 0;
}​

http://jsfiddle.net/u4v3Z/

于 2012-04-24T16:18:10.927 に答える
0

まず第一に、CSS のスキルを向上させたい場合は、レイアウトにテーブルを使用するのをすぐにやめるべきです。

次に、:first-child疑似クラスは、親の最初の子である要素に影響を与えます。したがって、要素が 1 つしかなく、それが書き込みtbodyの最初の子であるか、同じ結果が得られるためです。tabletbodytbody:first-child

編集：私はあなたがここにいると思いますtr:first-child td（最初の表の行の表のセルだけに上罫線を付けたい）。

問題を解決するにはborder-bottom、すべてtdの s を使用できます。ただし、上部にも境界線が必要な場合は、実際の境界線を設定するtable か、すべてのtdsaborder-top と border-bottomを指定できます。もちろん、これはあなたが説明したように二重の境界線をレンダリングしますが、を使用してテーブルの境界線を折りたたむことができますborder-collapse: collapse。

要するに: table {border-collapse: collapse}. ただし、レイアウトにテーブルを使用しないでください。

于 2012-04-24T16:19:54.707 に答える
0

私はこれがうまくいくと信じています...

td {border-top:1px solid #000;}
于 2012-04-24T16:14:34.053 に答える