​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
.pricing-table-container {
6
    overflow-x: auto;
7
    padding-bottom: 15px; /* space for scrollbar */
8
    padding-top: 20px;    /* Provides space for the 'Most Popular' badge */
9
}
10
.pricing-table-detailed {
11
    width: 100%;
12
    min-width: 800px;
13
    border-collapse: separate;
14
    border-spacing: 0;
15
    font-family: 'Helvetica Neue', Arial, sans-serif;
16
    text-align: center;
17
}
18
​
19
.pricing-table-detailed th,
20
.pricing-table-detailed td {
21
    padding: 20px;
22
    vertical-align: middle;
23
}
24
​
25
/* Feature Name (First Column) */
26
.pricing-table-detailed tbody th {
27
    text-align: left;
28
    font-weight: 600;
29
    font-size: 0.95rem;
30
    color: #333;
31
    border-bottom: 1px solid #f0f0f0;
32
}
33
.pricing-table-detailed tbody td {
34
    border-bottom: 1px solid #f0f0f0;
35
    color: #555;
36
}
37
​
38
/* Plan Column Headers */
39
.pricing-table-detailed .plan-header {
40
    background: #fff;
41
    border-bottom: 2px solid #e9ecef;
42
}
43
.pricing-table-detailed .plan-name {
44
    font-size: 1.3rem;
45
    font-weight: 700;
46
    margin-bottom: 0.5rem;
47
}
48
.pricing-table-detailed .plan-price {
49
    font-size: 2.5rem;
50
    font-weight: bold;
51
    color: #1d2d35;
52
}
53
.pricing-table-detailed .plan-price span {
54
    font-size: 1rem;
55
    font-weight: 300;
56
    color: #777;
57
}
58
​
59
/* Call-to-action button */
60
.pricing-table-detailed .btn-select {
61
    display: inline-block;
62
    padding: 12px 30px;
63
    margin-top: 1rem;
64
    font-size: 1rem;
65
    font-weight: bold;
66
    text-decoration: none;
67
    color: #fff;
68
    background-color: #3498db;
69
    border-radius: 5px;
70
    transition: background-color 0.2s ease-in-out;
71
}
72
.pricing-table-detailed .btn-select:hover {
73
    background-color: #2980b9;
74
}
75
​
76
​
77
/* ---- Highlighted Plan Styling ---- */
78
.pricing-table-detailed .plan-highlight {
79
    background-color: #fcfcfc;
80
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
81
    border: 2px solid #3498db;
82
    border-radius: 8px;
83
    position: relative;
84
    transform: scale(1.05); /* Makes the column slightly larger */
85
    z-index: 10;
86
}
87
.pricing-table-detailed .plan-highlight .plan-header {
88
    background-color: #ebf5fb;
89
    border-radius: 6px 6px 0 0;
90
}
91
.pricing-table-detailed .plan-highlight .btn-select {
92
    background-color: #e67e22;
93
}
94
.pricing-table-detailed .plan-highlight .btn-select:hover {
95
    background-color: #d35400;
96
}
97
.pricing-table-detailed .popular-badge {
98
    position: absolute;
99
    top: -15px;
100
    left: 50%;
101
    transform: translateX(-50%);
102
    background-color: #3498db;
103
    color: #fff;
104
    padding: 5px 15px;
105
    border-radius: 15px;
106
    font-size: 0.8rem;
107
    font-weight: bold;
108
}
109
/* ---- End Highlighted Styling ---- */
110
​
111
​
112
.pricing-table-detailed .check { color: #2ecc71; font-size: 1.2rem; }
113
.pricing-table-detailed .cross { color: #e74c3c; font-size: 1.2rem; }
114
</style>
115
​
116
​
117
<div class="pricing-table-container">
118
    <table class="pricing-table-detailed">
119
        <thead>
120
            <tr>
121
                <!-- Empty top-left cell -->
122
                <th style="border:none; background:transparent;"></th>
123
                <th class="plan-header">
124
                    <div class="plan-name">Starter</div>
125
                    <div class="plan-price">$12<span>/mo</span></div>
126
                    <a href="#" class="btn-select">Choose Plan</a>
127
                </th>
128
                <th class="plan-header plan-highlight">
129
                    <div class="popular-badge">Most Popular</div>
130
                    <div class="plan-name">Pro</div>
131
                    <div class="plan-price">$35<span>/mo</span></div>
132
                    <a href="#" class="btn-select">Choose Plan</a>
133
                </th>
134
                <th class="plan-header">
135
                    <div class="plan-name">Business</div>
136
                    <div class="plan-price">$79<span>/mo</span></div>
137
                    <a href="#" class="btn-select">Choose Plan</a>
138
                </th>
139
            </tr>
140
        </thead>
141
        <tbody>
142
            <tr>
143
                <th scope="row">Team Members</th>
144
                <td>1</td>
145
                <td>5</td>
146
                <td>Unlimited</td>
147
            </tr>
148
            <tr>
149
                <th scope="row">Project Storage</th>
150
                <td>2 GB</td>
151
                <td>20 GB</td>
152
                <td>200 GB</td>
153
            </tr>
154
            <tr>
155
                <th scope="row">Live Chat Support</th>
156
                <td><span class="cross">✗</span></td>
157
                <td><span class="check">✓</span></td>
158
                <td><span class="check">✓</span></td>
159
            </tr>
160
            <tr>
161
                <th scope="row">Custom Branding</th>
162
                <td><span class="cross">✗</span></td>
163
                <td><span class="cross">✗</span></td>
164
                <td><span class="check">✓</span></td>
165
            </tr>
166
        </tbody>
167
    </table>
168
</div>