【CSS】テーブルを見やすくするデザイン（table design）

HTML

HTML

  <table class="content-table">
    <thead>
      <tr>
        <th>No.</th>
        <th>名前</th>
        <th>年齢</th>
        <th>タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>藤井</td>
        <td>19</td>
        <td>二冠</td>
      </tr>
    <!-- 以下省略 -->
    </tbody>
  </table>

CSS

tableタグのCSS

CSS

   .content-table {
    border-collapse: collapse;  /* 枠線を取り除く */ 
    margin: 25px auto;
    font-size: 1.5em;
    border-radius: 5px 5px 0 0;  /* 左右の上の角だけに丸みを */
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);   /* テーブルに影を作り立体的に見せる */
  }

ヘッダー部分のCSS

CSS

  .content-table thead tr {
    background: #005498;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
  }

tbodyのCSS

CSS

  .content-table tbody tr {
    border-bottom: 1px solid #dddddd;
    transition: 0.8s all ease;
  }
  /* 偶数行をグレーに */
  .content-table tbody tr:nth-of-type(even) {
    background: #f3f3f3;
  }
  /* テーブルの下の枠を装飾 */
  .content-table tbody tr:last-of-type {
    border-bottom: 2px solid #005498;
  }
  /* マウスをのせた時のエフェクト */
  .content-table tbody tr:hover {
    font-weight: bold;
    color: #005498;
  }

全てのコード

コードを見る

  <style>
    .content-table {
      border-collapse: collapse;
      margin: 25px auto;
      font-size: 1.5em;
      border-radius: 5px 5px 0 0;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }
    .content-table thead tr {
      background: #005498;
      color: #ffffff;
      text-align: center;
      font-weight: bold;
    }
    .content-table th,
    .content-table td {
      padding: 12px 15px;
      background: none;
    }
    .content-table tbody tr {
      border-bottom: 1px solid #dddddd;
      transition: 0.8s all ease;
    }
    .content-table tbody tr:nth-of-type(even) {
      background: #f3f3f3;
    }
    .content-table tbody tr:last-of-type {
      border-bottom: 2px solid #005498;
    }
    .content-table tbody tr:hover {
      font-weight: bold;
      color: #005498;
    }
  </style>
  <!-- HTML -->
  <table class="content-table">
    <thead>
      <tr>
        <th>No.</th>
        <th>名前</th>
        <th>年齢</th>
        <th>タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>藤井</td>
        <td>19</td>
        <td>二冠</td>
      </tr>
      <tr>
        <td>2</td>
        <td>豊島</td>
        <td>31</td>
        <td>竜王</td>
      </tr>
      <tr>
        <td>3</td>
        <td>渡辺</td>
        <td>37</td>
        <td>名人</td>
      </tr>
      <tr>
        <td>4</td>
        <td>永瀬</td>
        <td>28</td>
        <td>王座</td>
      </tr>
    </tbody>
  </table>