東京都府中市、九段下の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_table05">
      <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_table05 {
      border:1px solid #999999;
      border-collapse: collapse;
      color:#333333;
      line-height: 1.6;
      text-align: left;
      width: 100%;
    }
    .msr_table05 th {
      border:1px solid #999999;
      font-size: 14px;
      font-weight: normal;
      padding: 12px 16px;
      text-align: center;
      vertical-align : middle;
    }
    .msr_table05 thead th{
      position:relative;
    }
    .msr_table05 thead th:after{
      content: "";
      display: block;
      left: 0;
      position: absolute;
      bottom: 2px;
      width: 100%;
      border-bottom: 1px solid #999999;
    }
    .msr_table05 td {
      border:1px solid #999999;
      font-size: 14px;
      padding: 12px 16px;
      vertical-align: top;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

その他のテーブル

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
マテリアルなテーブル
th th th th
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
フラットなテーブル
テーブルの一覧をもっと見る

要素一覧