Feature Comparison Table CSS (Code Snippet)

<div class="compare-container">
  <table class="compare-table">
    <thead>
      <tr>
        <th>Features</th>
        <th>Basic</th>
        <th class="highlight">Pro</th>
        <th>Enterprise</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Users</td>
        <td>1</td>
        <td class="highlight">5</td>
        <td>Unlimited</td>
      </tr>
      <tr>
        <td>Storage</td>
        <td>10GB</td>
        <td class="highlight">100GB</td>
        <td>1TB</td>
      </tr>
      <tr>
        <td>Support</td>
        <td>Email</td>
        <td class="highlight">24/7 Chat</td>
        <td>Dedicated Agent</td>
      </tr>
      <tr>
        <td>Analytics</td>
        <td>&#10005;</td>
        <td class="highlight">&#10003;</td>
        <td>&#10003;</td>
      </tr>
    </tbody>
  </table>
</div>

.compare-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  overflow-x: auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}
.compare-table th {
  padding: 20px;
  text-align: center;
  color: #1f2937;
  font-size: 1.1rem;
  border-bottom: 2px solid #f3f4f6;
}
.compare-table th:first-child {
  text-align: left;
}
.compare-table td {
  padding: 15px;
  text-align: center;
  color: #6b7280;
  border-bottom: 1px solid #f3f4f6;
}
.compare-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: #374151;
}
/* Highlight Column */
.highlight {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
}
.compare-table tr:last-child td {
  border-bottom: none;
}

Feature Comparison Table CSS

Share Code Snippet