TABLEテーブルを使うと、HTML制作の初心者はエッジの太さを変更する方法に遭遇します。デフォルトのTABLEエッジ設定は1pxでも非常に太いためです。 したがって、細線境界を作成する他の方法もあり、ここにCSSを使って細線を実装する方法を紹介します。これは非常に効果的で、すべてのブラウザと互換性があります。
単に細線テーブルの枠を設定するだけでは、ブラウザの互換性を保証するのは難しいです。 一般的な慣行として、CSS2の「border-collapse: collapse」を利用することがあります。 属性、マージ、テーブル、ボーダー; テーブル要素には左右と上部の枠、thとtdの要素には左右の境界線を設定します。
HTML:
<table> <tr> <th>テーブルヘッド(row1, col1)</th> <th>table head(row1, col2)</th> <th>table head(row1, col3)</th> </tr> <tr> <td>table data(row1, col1)</td> <td>テーブルデータ(row1, col2)</td> <td>table data(row1, col3)</td> </tr> <tr> <td>table data(row2, col1)</td> <td>table data(row2, col2) table data(row2, col2)</td> <td>テーブルデータ(行2、col3)</td> </tr>
CSS</table>:
table{border-collapse:collapse; border-spacing:0; border-left:1px solid #888; ボーダートップ:1px ソリッド #888; 背景:#efefef; }
TH,TD{border-right:1px solid #888; border-bottom:1px solid #888; パッド数:5px 15px; }
th{font-weight:bold; 背景:#ccc; } |
掲載地 2015/04/18 22:19:21
|
|
|
|
掲載地 2015/07/15 1:06:57
|
地主|
掲載地 2021/03/11 10:51:40
|
サポートをチェックしてみてください
