東京都府中市、九段下のWEB制作会社Maromaroのブログです

マテリアルなテーブル

  • RESULT
  • HTML
  • CSS
  • th th th th
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
  • コピー
    <table class="msr_table03">
      <thead>
        <tr>
          <th></th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
      </tbody>
    </table>
  • コピー
    .msr_table03 {
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      border-collapse: collapse;
      line-height: 1.5;
      text-align: left;
      width: 100%;
    }
    .msr_table03 th {
      background-color: #1B73BA;
      box-sizing: border-box;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: normal;
      padding: 10px;
      text-align: center;
      vertical-align : middle;
    }
    .msr_table03 thead {
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
    }
    
    /* th偶数番号の設定 */
    .msr_table03 thead th:nth-child(odd) {
      background-color: #17619C;
      border-right: 1px solid #17619C;
    }
    .msr_table03 td {
      background-color: #F8F8F8;
      border-right: 1px solid #8DA6AF;
      border-top: 1px solid #8DA6AF;
      font-size: 14px;
      padding: 10px;
      vertical-align: top;
    }
    .msr_table03 td:last-child {
      border-right: none;
    }
    .msr_table03 tbody tr:first-child td {
      border-top: none;
    }
    
    /* tr奇数番号のth設定 */
    .msr_table03 tr:nth-child(even) th {
      background-color: #17619C;
      border-bottom: 1px solid #17619C;
      box-shadow: 2px 0 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 2px 0 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 2px 0 2px rgba(0,0,0,0.2);
    }

検証済みブラウザ

  • FF
  • chrome
  • Safari

その他のテーブル

th th th th
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
スタイリッシュなテーブル
th th th th th
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
コミック風のテーブル
th th th th
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
フラットなテーブル
テーブルの一覧をもっと見る

要素一覧