シンプルで見やすいストライプテーブル

<div class="stripe-table_wrapper">
  <h2 class="stripe-table_title">料金プラン比較表</h2>
  <table class="stripe-table">
    <thead>
      <tr>
        <th>プラン名</th>
        <th>価格</th>
        <th>ユーザー数</th>
        <th>サポート</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>スターター</td>
        <td>¥500/月</td>
        <td>1人</td>
        <td>メール対応</td>
      </tr>
      <tr>
        <td>ビジネス</td>
        <td>¥1,200/月</td>
        <td>3人まで</td>
        <td>チャット＋メール</td>
      </tr>
      <tr>
        <td>エンタープライズ</td>
        <td>¥3,000/月</td>
        <td>無制限</td>
        <td>24時間サポート</td>
      </tr>
    </tbody>
  </table>
</div>

.stripe-table_wrapper {
  max-width: 900px;
  margin: 60px auto;
  font-family: 'Segoe UI', sans-serif;
  background: #fff;
  padding: 20px;
}

.stripe-table_title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
  text-align: left;
}

.stripe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: #333;
}

.stripe-table thead th {
  background-color: #f2f4f7;
  color: #222;
  padding: 12px;
  border-bottom: 2px solid #ccc;
  text-align: left;
}

.stripe-table tbody td {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.stripe-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}