Agenda Table

Demo

Usage

<table class="table table-striped agenda-table">
    <thead>
        <tr>
            <th scope="col" class="agenda-time">Time</th>
            <th scope="col" class="agenda-session">Session</th>
            <th scope="col" class="agenda-location">Location</th>
            <th scope="col" class="agenda-speaker">Speaker</th>
            <th scope="col" class="agenda-description">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr scope="row">
            <td data-title="Time" class="agenda-time">Time Lorem ipsum</td>
            <td data-title="Session" class="agenda-session"> Session Lorem ipsum dolor sit amet dolor</td>
            <td data-title="Location" class="agenda-location">Location Lorem ipsum</td>
            <td data-title="Speaker" class="agenda-speaker">Speaker Lorem ipsum</td>
            <td data-title="Description" class="agenda-description">Description Lorem ipsum dolor sit amet dolor<span class="description-link"><a class="hyperlink right-text  " href="/hyperlink">Hyperlink<svg width="6" height="20" viewBox="0 0 6 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L5.70711 9.29289C6.09763 9.68342 6.09763 10.3166 5.70711 10.7071L1.70711 14.7071C1.31658 15.0976 0.683417 15.0976 0.292893 14.7071C-0.0976311 14.3166 -0.0976311 13.6834 0.292893 13.2929L3.58579 10L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z" fill="currentColor"></path>
                        </svg></a></span></td>
        </tr>
        <tr scope="row">
            <td data-title="Time" class="agenda-time">Time Lorem ipsum</td>
            <td data-title="Session" class="agenda-session"> Session Lorem ipsum dolor sit amet dolor</td>
            <td data-title="Location" class="agenda-location">Location Lorem ipsum</td>
            <td data-title="Speaker" class="agenda-speaker">Speaker Lorem ipsum</td>
            <td data-title="Description" class="agenda-description">Description Lorem ipsum dolor sit amet dolor<span class="description-link"><a class="hyperlink right-text  " href="/hyperlink">Hyperlink<svg width="6" height="20" viewBox="0 0 6 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L5.70711 9.29289C6.09763 9.68342 6.09763 10.3166 5.70711 10.7071L1.70711 14.7071C1.31658 15.0976 0.683417 15.0976 0.292893 14.7071C-0.0976311 14.3166 -0.0976311 13.6834 0.292893 13.2929L3.58579 10L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z" fill="currentColor"></path>
                        </svg></a></span></td>
        </tr>
        <tr scope="row">
            <td data-title="Time" class="agenda-time">Time Lorem ipsum</td>
            <td data-title="Session" class="agenda-session"> Session Lorem ipsum dolor sit amet dolor</td>
            <td data-title="Location" class="agenda-location">Location Lorem ipsum</td>
            <td data-title="Speaker" class="agenda-speaker">Speaker Lorem ipsum</td>
            <td data-title="Description" class="agenda-description">Description Lorem ipsum dolor sit amet dolor<span class="description-link"><a class="hyperlink right-text  " href="/hyperlink">Hyperlink<svg width="6" height="20" viewBox="0 0 6 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L5.70711 9.29289C6.09763 9.68342 6.09763 10.3166 5.70711 10.7071L1.70711 14.7071C1.31658 15.0976 0.683417 15.0976 0.292893 14.7071C-0.0976311 14.3166 -0.0976311 13.6834 0.292893 13.2929L3.58579 10L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z" fill="currentColor"></path>
                        </svg></a></span></td>
        </tr>
    </tbody>
</table>

Options