CSSで表のスタイルを設定するにはどうすればよいですか? CSSで表のスタイルを設定する方法-CSSチュートリアル-php.cn

CSSで表のスタイルを設定するにはどうすればよいですか? CSSで表のスタイルを設定する方法

不言

リリース： 2018-08-18 14:16:10

オリジナル

5539 人が閲覧しました

単純なテーブルは単調に感じることがありますが、CSS テーブルにスタイルを追加するにはどうすればよいですか?この記事ではCSSテーブルスタイルの設定方法を紹介します。

1. 単純なテーブルtable.html

<!doctype html><html><head>
    <meta charset="utf-8">
    <title>表格样式</title>
    <link href="box.css" type="text/css" rel="stylesheet"></head><body>
  <center>
  <table class="class">
      <caption>课程表</caption>
        <tr>
            <th>星期\课程</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
      </tr>
      <tr>
            <th>1-2节</th>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>英语</td>
             <td>英语</td>
      </tr>

      <tr>
            <th>3-4节</th>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
            <td>英语</td>
             <td>体育</td>
      </tr>

      <tr>
            <th>5-6节</th>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
            <td>化学</td>
            <td>美术</td>
      </tr>

      <tr>
            <th>7-8节</th>
            <td>数学</td>
            <td>美术</td>
            <td>化学</td>
            <td>英语</td>
            <td>体育</td>
      </tr>
      <tr>
            <th>9-10节</th>
            <td>生物</td>
            <td>美术</td>
            <td>生物</td>
            <td>英语</td>
            <td>物理</td>
      </tr>
    </table>
  </center>
  </body></html>

ログイン後にコピー

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;
    }

ログイン後にコピー

2. 境界線の結合: boder-collapse 属性値:
分離 (分離、デフォルト) )

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:collapse;
    }

ログイン後にコピー

3. Border-spacing (premise: border-collapse: Separate;)

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;
    }

ログイン後にコピー

4. テーブルタイトルのキャプション側の位置を設定します

属性値: トップ; // デフォルト t 下; 残り
右; bTable.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;    
    caption-side:bottom;
    }

ログイン後にコピー

5、セルオブジェクトの幅がセルで定義された幅を超える場合、Table-Layout:Fixed を使用してテーブルの幅を維持できます。固定 (固定幅)
table.css

table,td,th{
    border:1px solid #aaa;
        font-size: 23px;    
        border-collapse:separate;    
        border-spacing: 5px;    
        table-layout: fixed;    
        caption-side:top;
        }

ログイン後にコピー