Product Feature Comparison Table

<!DOCTYPE html>
<title>My Example</title>

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: sans-serif;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden; /* Ensures child element border-radius is clipped */
}

.comparison-table th, 
.comparison-table td {
    border-bottom: 1px solid #e0e0e0;
    padding: 16px;
}
.comparison-table td:first-child {
    text-align: left;
    font-weight: bold;
    color: #333;
}

.comparison-table thead th {
    background-color: #f7f7f7;
    border-bottom: 2px solid #ccc;
    font-size: 1.1rem;
    vertical-align: top;
}
.comparison-table thead th:first-child {
    background-color: transparent; /* No background for the top-left corner */
    border-bottom: none;
}
.comparison-table .plan-name {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 8px;
}
.comparison-table .plan-price {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c3e50;
}
.comparison-table .plan-price-period {
    font-size: 0.8rem;
    color: #666;
    display: block;
    margin-top: -5px;
}
.comparison-table .btn-signup {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 15px;
    background-color: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}
.comparison-table .btn-signup:hover {
    background-color: #2980b9;
}

.comparison-table .check { color: #2ecc71; font-size: 1.5rem; }
.comparison-table .cross { color: #e74c3c; font-size: 1.5rem; }

/* Highlighted Column Styling */
.comparison-table .col-highlight {
    background-color: #fdfaee; /* A light yellow tint */
    border-left: 1px solid #ffe89e;
    border-right: 1px solid #ffe89e;
}
.comparison-table .col-highlight .plan-name {
    color: #d35400;
}
.comparison-table .col-highlight .btn-signup {
    background-color: #e67e22;
}
.comparison-table .col-highlight .btn-signup:hover {
    background-color: #d35400;
}

</style>

<div class="table-container">
    <table class="comparison-table">
        <thead>
            <tr>
                <th></th> 
                <th>
                    <span class="plan-name">Basic</span>
                    <span class="plan-price">$10</span>
                    <span class="plan-price-period">/ month</span>
                    <a href="#signup" class="btn-signup">Sign Up</a>
                </th>
                <th class="col-highlight">
                    <span class="plan-name">Pro</span>
                    <span class="plan-price">$25</span>
                    <span class="plan-price-period">/ month</span>
                    <a href="#signup" class="btn-signup">Choose Pro</a>
                </th>
                <th>
                    <span class="plan-name">Enterprise</span>
                    <span class="plan-price">$50</span>
                    <span class="plan-price-period">/ month</span>
                    <a href="#signup" class="btn-signup">Sign Up</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Cloud Storage</th>
                <td>10 GB</td>
                <td>50 GB</td>
                <td>200 GB</td>
            </tr>
            <tr>
                <th scope="row">User Accounts</th>
                <td>1</td>
                <td>5</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <th scope="row">24/7 Support</th>
                <td><span class="cross">&cross;</span></td>
                <td><span class="check">&check;</span></td>
                <td><span class="check">&check;</span></td>
            </tr>
            <tr>
                <th scope="row">API Access</th>
                <td><span class="cross">&cross;</span></td>
                <td><span class="cross">&cross;</span></td>
                <td><span class="check">&check;</span></td>
            </tr>
             <tr>
                <th scope="row">Dedicated Account Manager</th>
                <td><span class="cross">&cross;</span></td>
                <td><span class="cross">&cross;</span></td>
                <td><span class="check">&check;</span></td>
            </tr>
        </tbody>
    </table>
</div>