css_html/css_WEB-ITnoseで実装した美しい表細線表コードの例-htmlチュートリアル-php.cn

css_html/css_WEB-ITnoseで実装した美しい表細線表コードの例

WBOY

リリース： 2016-06-24 11:28:52

オリジナル

2082 人が閲覧しました

CSS で実装された美しいテーブルの細線テーブルコードの例:
デフォルト状態のテーブルの境界線は、顧客の Web サイトに直接適用すると、その影響が想像できます。
以下は、非常に美しい細線テーブルのコード例です。
コードは次のとおりです:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.table{   width:100%;   padding:0px;   margin:0px;   font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体;   border-left:1px solid #ADD8E6;   border-collapse:collapse; } /*表头样式。*/ .table th{   font-size:12px;   font-weight:600;   color:#303030;   border-right:1px solid #ADD8E6;   border-bottom:1px solid #ADD8E6;   border-top:1px solid #ADD8E6;   letter-spacing:2px;   text-align:left;   padding:10px 0px 10px 0px;   white-space:nowrap;   text-align:center;   overflow: hidden; } .table td {   border-right:1px solid #ADD8E6;   border-bottom:1px solid #ADD8E6;   background:#fff;   font-size:12px;   padding:3px 3px 3px 6px;   color:#303030;   word-break:break-all;   word-wrap:break-word;   white-space:normal; } </style></head><body><table class="table">  <thead>    <tr>      <th>蚂蚁部落一</th>      <th>蚂蚁部落二</th>    </tr>  </thead>  <tr>    <td>javascript教程</td>    <td>jQuery教程</td>  </tr>  <tr>    <td>HTML教程</td>    <td>div css教程</td>  </tr></table></body></html>

ログイン後にコピー

上記のコードは非常に単純なのでここでは紹介しませんが、class="table" を追加するだけで非常に簡単に使用できます。もちろん、この効果は万能ではなく、実際の要件に応じていくつかの設定を行う必要があります。

元のアドレスは次のとおりです: http://www.softwhy.com/divcss/