CSS 属性 border-collapse を使用して表の境界線の問題を解決する方法

ページをレイアウトするときに、写真やテキストに加えて最もよく使用されるのはテーブルです。私は、テーブルの境界線が複数層になっているのを見るのがとても嫌いです。非常に見苦しいので、テーブルの境界線を設定する方法を知っていますか?今日は CSS の border-collapse 属性について説明します。この属性は非常に実用的ですが、まだ知らない人も多いので、ぜひ見てください。 通常、次のように表を作成し、表の境界線と必要なスタイルを指定します。コードは次のとおりです:

HTML 部分:

<table class="aa">
   <thead>
    <tr>
     <th>序号</th>
     <th>姓名</th>
     <th>性别</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>张晗</td>
     <td>男</td>
     <td>23</td>
    </tr>
    <tr>
     <td>2</td>
     <td>陆颖</td>
     <td>女</td>
     <td>20</td>
    </tr>
    <tr>
     <td>3</td>
     <td>郝婷婷</td>
     <td>女</td>
     <td>19</td>
    </tr>
   </tbody>
  </table>

CSS 部分:

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}
.aa th,.aa td{border: 1px solid #ccc;padding: 10px;}

見てください。これは次のようなものです:

これはテーブルの理解と一致しません。通常、外側の境界線と、各セルではなくセル 各セルには境界線があります。では、これらの余分な境界線を削除するにはどうすればよいでしょうか?次が今日の焦点です

border-collapse CSS 属性は、冗長な境界線を削除するのに役立ちます。

まず、border-collapse 属性値の説明を見てみましょう。デフォルト値は「分離」です。境界線が隣接している場合は結合されません。この属性をテーブルに追加しましょう。

りー

写真:

見ましたか？ border-collapse: Collapse をテーブルに適用すると、テーブルの境界線が結合され、より美しくなります。この属性は将来の作業で使用でき、非常に便利です。この記事があなたのお役に立てれば幸いです。友人、特に初心者に試してもらうことをお勧めします。

以上がCSS 属性 border-collapse を使用して表の境界線の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。