CSS プロパティを使用して角が丸いテーブルを作成しようとしていますborder-radius。使用しているテーブル スタイルは次のようになります。
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
問題はここにあります。border-collapse:collapseプロパティも設定したいのですが、設定すると機能しなくなります。実際に使用せずborder-radiusに同じ効果を得ることができる CSS ベースの方法はありますか?border-collapse:collapse
問題の大部分は、テーブルの角を丸く設定しても、コーナーtd要素の角には影響がないということのようです。テーブルがすべて 1 色であれば、最初の行と最後の行のそれぞれ上部と下部の角を丸くするだけで済むので、これは問題になりませんtd。ただし、見出しを区別するためとストライプ化のためにテーブルに異なる背景色を使用しているため、内側のtd要素にも丸い角が表示されます。
テーブルの角を丸くした別の要素で囲むと、テーブルの角が「透けて見える」ため、うまくいきません。
境界線の幅を 0 に指定しても、テーブルは折りたたまれません。
セル間隔をゼロに設定した後も、下部のtd角は四角のままです。
テーブルは PHP で生成されるため、外側の th/tds それぞれに異なるクラスを適用し、各コーナーを個別にスタイル設定できます。これはあまりエレガントではなく、複数のテーブルに適用するのは少し面倒なので、私はこれを行いたくありません。引き続きご提案をお願いします。
これをJavaScriptなしで実行したいと思います。
ベストアンサー1
分かりました。特別なセレクターをいくつか使用する必要があるだけです。
テーブルの角を丸くすると、td要素も丸くならないという問題がありました。次のようにすれば、この問題を解決できます。
table tr:last-child td:first-child {
border: 2px solid orange;
border-bottom-left-radius: 10px;
}
table tr:last-child td:last-child {
border: 2px solid green;
border-bottom-right-radius: 10px;
}<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>すべてが適切に丸められるようになりましたが、すべてが壊れるという問題がまだ残っていますborder-collapse: collapse。
回避策としては、追加border-spacing: 0デフォルトをborder-collapse: separateそのままにしておきます。