3列比較型プラン表

<div class="plan-table-wrapper">
  <table class="plan-style-table">
    <thead>
      <tr>
        <td class="plan-head">フリープラン</td>
        <td class="plan-head">ビジネスプラン</td>
        <td class="plan-head">プレミアムプラン</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="price">¥0<span>／月</span></td>
        <td class="price">¥2,980<span>／月</span></td>
        <td class="price">¥6,980<span>／月</span></td>
      </tr>
      <tr>
        <td>利用回数　月10回まで</td>
        <td>利用回数　月50回まで</td>
        <td>利用回数　無制限</td>
      </tr>
      <tr>
        <td>オプション　別料金</td>
        <td>オプション　◯◯◯◯</td>
        <td>オプション　無制限</td>
      </tr>
      <tr>
        <td>セキュリティソフト無</td>
        <td>セキュリティソフト付</td>
        <td>セキュリティソフト付</td>
      </tr>
      <tr>
        <td>―</td>
        <td>―</td>
        <td>24時間サポート体制</td>
      </tr>
    </tbody>
  </table>
</div>

.plan-table-wrapper {
  max-width: 900px;
  margin: 50px auto;
  font-family: "Helvetica Neue", sans-serif;
  overflow-x: auto;
}

.plan-style-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
}

.plan-style-table thead td {
  background-color: #6495d0;
  color: #fff;
  font-size: 16px;
  padding: 14px;
  font-weight: bold;
}

.plan-style-table .price {
  font-size: 28px;
  font-weight: bold;
  padding: 18px;
  color: #333;
}

.plan-style-table .price span {
  font-size: 16px;
  font-weight: normal;
  margin-left: 4px;
}

.plan-style-table td {
  padding: 14px;
  font-size: 14px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
}

.plan-style-table tbody tr:nth-child(odd) td {
  background-color: #f9f9f9;
}