Comparison Table

Demo

Usage

<table class="table table-striped comparison">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Column 1 <span>Optional subtitle</span></th>
            <th scope="col">Column 2 <span>Optional subtitle</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Feature lorem ipsum dolor sit amet dolor sit amet</th>
            <td><svg width="20" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.7071 3.29289C19.0976 3.68342 19.0976 4.31658 18.7071 4.70711L6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929C0.683417 9.90237 1.31658 9.90237 1.70711 10.2929L6 14.5858L17.2929 3.29289C17.6834 2.90237 18.3166 2.90237 18.7071 3.29289Z" fill="#56A945"></path>
                </svg> <span>Column 1</span></td>
            <td><svg width="20" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.7071 3.29289C19.0976 3.68342 19.0976 4.31658 18.7071 4.70711L6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929C0.683417 9.90237 1.31658 9.90237 1.70711 10.2929L6 14.5858L17.2929 3.29289C17.6834 2.90237 18.3166 2.90237 18.7071 3.29289Z" fill="#56A945"></path>
                </svg> <span>Column 2</span></td>
        </tr>
        <tr>
            <th>Feature lorem ipsum dolor sit amet dolor sit amet</th>
            <td><svg width="20" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.7071 3.29289C19.0976 3.68342 19.0976 4.31658 18.7071 4.70711L6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929C0.683417 9.90237 1.31658 9.90237 1.70711 10.2929L6 14.5858L17.2929 3.29289C17.6834 2.90237 18.3166 2.90237 18.7071 3.29289Z" fill="#56A945"></path>
                </svg> <span>Column 1</span></td>
            <td><svg width="20" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.7071 3.29289C19.0976 3.68342 19.0976 4.31658 18.7071 4.70711L6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929C0.683417 9.90237 1.31658 9.90237 1.70711 10.2929L6 14.5858L17.2929 3.29289C17.6834 2.90237 18.3166 2.90237 18.7071 3.29289Z" fill="#56A945"></path>
                </svg> <span>Column 2</span></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <td><a class="hyperlink right-text  " href="/hyperlink">Hyperlink</a></td>
            <td><a class="hyperlink right-text  " href="/hyperlink">Hyperlink</a></td>
        </tr>
    </tfoot>
</table>

Options