東京都府中市、九段下の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_table02">
      <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_table02 {
      border-collapse: collapse;
      border-bottom: 1px solid #E6E6E6;
      border-right: 1px solid #E6E6E6;
      line-height: 1.5;
      text-align: left;
      width: 100%;
    }
    .msr_table02 th {
      background-color: #1B73BA;
      box-sizing: border-box;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: normal;
      padding: 10px;
      text-align: center;
      vertical-align : middle;
    }
    
    /* th偶数番号の設定 */
    .msr_table02 thead th:nth-child(odd) {
      background-color: #17619C;
    }
    .msr_table02 td {
      background-color: #E6E6E6;
      font-size: 13px;
      padding: 10px;
      vertical-align: top;
    }
    
    /* tr奇数番号のth設定 */
    .msr_table02 tr:nth-child(even) th {
      background-color: #17619C;
    }
    
    /* tr奇数番号のtd奇数番号設定 */
    .msr_table02 tr:nth-child(even) td:nth-child(even) {
      background-color: #F3F3F3;
    }
    
    /* tr偶数番号のtd偶数番号設定 */
    .msr_table02 tr:nth-child(odd) td:nth-child(odd) {
      background-color: #F3F3F3;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • 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
マテリアルなテーブル
テーブルの一覧をもっと見る

要素一覧