表の枠線はページ作成において最も面倒だと考えられていますが、以前は枠線のある表を作成するのが非常に面倒でしたが、今日はついにこの問題を解決しましたので、以下に例を共有します。
ページ作成で最も頭の痛い問題の 1 つは、テーブルの境界線です。私は境界線のあるテーブルを作成するのが嫌いです
border-collapseattribute ずっと悩んでいた問題が解決しました。お久しぶりです
CSS
コードは以下の通りです:
.table{ border: 1px solid #ccc; border-collapse: collapse; width:80%;} .table th, .table td{ border: 1px solid #ccc; padding: 10px; }
Html
<table class="table"> <thead> <tr> <th>id</th> <th>作者</th> <th>书名</th> <th>内容</th> <th>分类</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>唐家三少</td> <td>斗破苍穹</td> <td>斗破苍穹斗破苍穹</td> <td>玄幻</td> </tr> <tr class="success"> <td>001</td> <td>唐家三少</td> <td>斗破苍穹</td> <td>斗破苍穹斗破苍穹</td> <td>玄幻</td> </tr> </tbody> </table>
PS: border-collapse属性を使用する前後の比較
以上がcss: border-collapse 属性はテーブルの境界線の問題を解決しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。