プラン表

# div
![screencapture-file-Users-makotokawakami-projects-css-plan-div-html-2020-11-23-00_23_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565886/a58562b5-3511-63ea-fa68-1a6f9498ae55.png)

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Chat</title>
  <style>
    .plan{
      border-radius:10px;
      margin-left:3%;
      width: calc(85% / 3);
      /* width: 20%; */
      /* border: solid 1px #333 ; */
      
    }
    .plan div{
      /* margin-bottom:0.5rem; */
      height:120px;
      display: table;
      margin: 0 auto;
      padding:0 5px;
      
    }
    .plan p{
      text-align:center;
      vertical-align:middle;
      display: table-cell;
      
    }

    a{
      background-color: #25b327;
      color: white;
      padding:5px 10px;
      border-radius: 30px;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div style="display:flex;">
  <div class="plan" style="padding-top: 3px; width:15%;">
    <div>
      <p>
        見出し見出し見出し
      </p>
    </div>
    <div>
      <p>
        見出し
      </p>
    </div>
    <div>
      <p>
        見出し
      </p>
    </div>
    <div>
      <p>
        見出し
      </p>
    </div>
    <div>
      <p>
        見出し
      </p>
    </div>
  </div>
  <div class="plan" style="border: solid 3px #99FF66; ">
    <div>
      <p style="color:#99FF66; font-size:1.5rem; font-weight: bold">
        A
      </p>
    </div>
    <div>
      <p>
        データ１データ１データ１
      </p>
    </div>
    <div>
      <p>
        データ2<br>
        <a href="#">申し込み</a>
      </p>
    </div>

    <div style="display:flex; padding:0; ">
      <div style="width:50%; border-right: solid 1px #99FF66;">
        <p>
          データ3
        </p>
      </div>
      <div style="width:50%; border-left: solid 1px #99FF66;">
        <p>
          データ3-2データ3-2データ3-2
        </p>
      </div>
    </div>

    <div style="display:flex; padding:0; ">
      <div style="width:50%; border-right: solid 1px #99FF66;">
        <p>
          データ4
        </p>
      </div>
      <div style="width:50%; border-left: solid 1px #99FF66;">
        <p>
          データ4-2
        </p>
      </div>
    </div>

  </div>
  <div class="plan" style="border: solid 3px #FF9966; ">
    <div>
      <p style="color:#FF9966; font-size:1.5rem; font-weight: bold">
        B
      </p>
    </div>
    <div>
      <p>
        データ１
      </p>
    </div>
    <div>
      <p>
        データ2<br>
        <a href="#">申し込み</a>
      </p>
    </div>
    <div>
      <p>
        データ3
      </p>
    </div>
    <div>
      <p>
        データ4
      </p>
    </div>
  </div>
  <div class="plan" style="border: solid 3px #99CCFF; ">
    <div>
      <p style="color:#99CCFF; font-size:1.5rem; font-weight: bold">
        C
      </p>
    </div>
    <div>
      <p>
        データ１
      </p>
    </div>
    <div>
      <p>
        データ2<br>
        <a href="#">申し込み</a>
      </p>
    </div>
    <div>
      <p>
        データ3データ3データ3データ3データ3データ3
      </p>
    </div>
    <div>
      <p>
        データ4
      </p>
    </div>
  </div>
</div>
</body>
```



#table
![screencapture-file-Users-makotokawakami-projects-css-plan-table-html-2020-11-23-07_41_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565886/6da58fca-6ca6-19f8-1b81-23b38cb3a522.png)

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>CSS Chat</title>
  <style>

    table{
      /* border-collapse: collapse; */
      border-spacing: 5px 0;
      table-layout: fixed;
      width:100%;
    }

    table th{
      text-align: center;
      padding: 7px 0;
      width: calc(100% / 3);
    }

    table td{
      text-align: center;
      padding: 10px 5px;
      width: calc(100% / 3);
      height:100px;
    }

    table td a{
      background-color: #25b327;
      color: white;
      padding:5px 20px;
      border-radius: 30px;
      font-weight: bold;
    }
    /* table tr:last-child{
      border-bottom:solid 1px #99FF66;
    } */

    /* 縦１列目 */
    table th:nth-child(1){
      background-color:#99FF66;
    }
    table td:nth-child(1){
      border-right:solid 1px #99FF66;
      border-left:solid 1px #99FF66;
    }

    /* 縦２列目 */
    table th:nth-child(2){
      background-color:#f34955;
      color: white;
    }
    table td:nth-child(2){
      border-right:solid 1px #f34955;
      border-left:solid 1px #f34955;
    }

    /* 縦３列目 */
    table th:nth-child(3){
      background-color:#f5b932;
      color: white;
    }
    table td:nth-child(3){
      border-right:solid 1px #f5b932;
      border-left:solid 1px #f5b932;
    }

    /* 横２行目 */
    table tr:nth-child(2) td{
      font-size:1.2rem;
    }

    /* table .popular{
      width: 180px;
    } */
    /* table th.popular{
      position: relative;
    } */
    /* table th.popular span.inner{
      position: absolute;
      color:white;
      background-color: #f34955;
      left: 0;
      bottom: 0;
      display: block;
      width: 180px;
      padding: 10px 0;
    } */
    /* table tr *:nth-child(1){
      background: #49c5f0;
    } */

  </style>
</head>
<body>
  <table>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
    <tr>
      <td>¥0</td>
      <td>¥5,000</td>
      <td>¥8,000</td>
    </tr>
    <tr>
      <td><a href="#">申し込み</a></td>
      <td><a href="#">申し込み</a></td>
      <td><a href="#">申し込み</a></td>
    </tr>
    <tr>
      <td>データ１</td>
      <td>データ１</td>
      <td>データ１</td>
    </tr>
    <tr>
      <td>
        <div style="display:flex; height:100%;">
          <div style="width:50%; text-align: center; padding:35px 0; border-right:solid 1px #99FF66">データ2</div>
          <div style="width:50%; text-align: center; padding:35px 0; border-left:solid 1px #99FF66">データ2</div>
        </div>
      </td>
      <td>データ2</td>
      <td>データ2</td>
    </tr>
    <tr>
      <td style="border-bottom:solid 1px #99FF66;">
        <div style="display:flex;">
          <div style="width:50%; text-align: center; border-right:solid 1px #99FF66">データ3</div>
          <div style="width:50%; text-align: center; border-left:solid 1px #99FF66">データ3</div>
        </div>
      </td>
      <td style="border-bottom:solid 1px #f34955;">データ3</td>
      <td style="border-bottom:solid 1px #f5b932;">データ3データ２データ２データ２</td>
    </tr>
  </table>
</body>
```