Upwork Table

by joplomacedo

HTML

<table class="pricing_table">
    <caption>Find Your Next program options</caption>

    <thead>
        <tr>
            <td><!-- empty corner --></td>
            <th>
                <div class="fsz-l">Option 01</div>
                <h2 class="fsz-l fw-b">Workshop</h2>
            </th>
            <th>
                <div class="fsz-l">Option 02</div>
                <h2 class="fsz-l fw-b">Workshop & Coaching</h2>
            </th>
        </tr>

    </thead>


    <tbody>

        <tr>
            <td>
                <div class="fsz-m fw-b">Week 1-2</div>
                <div class="fsz-m">
                    <span class="fst-i">Values Creator</span> and <span class="fst-i">Brand Me</span> activity.
                </div>
            </td>
            <td class="ta-c td--no_side_pad">
                <img src="https://i.imgur.com/nSQSFZ5.png" class="checkmark" />
            </td>
            <td class="ta-c td--no_side_pad">
                <img src="https://i.imgur.com/nSQSFZ5.png" class="checkmark" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="fsz-m fw-b">
                    Week 2
                </div>
                <div class="fsz-m">
                    <span class="fst-i">Find Your Next</span> workshop
                </div>
            </td>
            <td class="ta-c td--no_side_pad">
                <img src="https://i.imgur.com/nSQSFZ5.png" class="checkmark" />
            </td>
            <td class="ta-c td--no_side_pad">
                <img src="https://i.imgur.com/nSQSFZ5.png" class="checkmark" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="fsz-m fw-b">Week 3-10</div>
                <div class="fsz-m">
                  Coaching program
                </div>
            </td>
            <td class="ta-c">

            </td>
            <td class="ta-c td--no_side_pad">
                <img src="https://i.imgur.com/nSQSFZ5.png"...

CSS

.pricing_table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    font-weight: 400;
}

.pricing_table caption {
    display: none;
}

.pricing_table th,
.pricing_table td {
    border: 1px solid #c0bcee;
    padding: 1.7em 1.8em;
    text-align: left;
    font-weight: inherit;
    width: 25%;
}

.pricing_table th:first-child,
.pricing_table td:first-child {
    width: auto;
}

.pricing_table th {
  vertical-align: bottom;
}

.pricing_table .td--no_side_pad {
  padding: 1.7em 0;
}

.pricing_table .ta-c {
    text-align: center;
}

.pricing_table .fsz-l {
    font-size: 1.2em;
}

.pricing_table .fsz-m {
    font-size: 1.1em;
}

.pricing_table .fw-b {
    font-weight: 600;
}

.pricing_table .fst-i {
    font-style: italic;
}

.pricing_table .d-b {
    display: block;
}

.pricing_table .checkmark {
  max-width: 1.5em;
}

.pricing_table .extra_feature_info {
      line-height: 1.4;
    margin-top: .3em;
}