カラーブロック付き・料金プラン表デザイン

<div class="plan-table_box">
  <table class="plan-table">
    <thead>
      <tr>
        <th></th>
        <th>サービス内容</th>
        <th>料金（月額）</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="plan-type">ライトプラン</th>
        <td>最低限の機能だけ使いたい方におすすめ</td>
        <td>¥2,500</td>
      </tr>
      <tr>
        <th class="plan-type">スタンダード</th>
        <td>基本を押さえた安心のスタンダードプラン</td>
        <td>¥5,000</td>
      </tr>
      <tr>
        <th class="plan-type">ビジネスプラン</th>
        <td>チームや法人向けのフルサポートプラン</td>
        <td>¥12,000</td>
      </tr>
    </tbody>
  </table>
</div>

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

.plan-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.plan-table thead th {
  background-color: #0f5c65;
  color: #fff;
  padding: 14px;
  font-size: 15px;
  text-align: left;
}

.plan-table tbody th.plan-type {
  background-color: #64b6c5;
  color: #fff;
  font-weight: bold;
  text-align: left;
  padding: 18px;
  font-size: 15px;
  white-space: nowrap;
}

.plan-table td {
  background-color: #e9f6f9;
  padding: 18px;
  font-size: 14px;
  color: #333;
}

.plan-table td:last-child {
  text-align: right;
  font-weight: bold;
  font-size: 16px;
  color: #0f5c65;
}