Table: Avec un collapse

Choix de l'univers FT

Table Tableau

Le tableau permet l’affichage et l’organisation de données textuelles ou numériques.

Documentation : Figma

Langage:  HTML 

<div class="table-responsive">
    <table class="table">
        <caption>Titre du tableau</caption>

        <thead>
            <tr>
                <th scope="col">Colonne 1</th>
                <th scope="col">Colonne 2</th>
                <th scope="col">Colonne 3</th>
                <th scope="col"><span class="sr-only">Actions</span></th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Contenu</td>
                <td>Contenu</td>
                <td>Contenu</td>
                <td>
                    <div class="table-tools-group">
                        <button class="btn btn-secondary btn-ratio-square is-rotating" data-ft-collapse="tr-collapse-1" id="button_297513411" type="button" data-ft-tooltip="Plus d’informations" data-ft-vocalize="false">
                            <span aria-hidden="true" class="icon icon-chevron-sm-d"></span>
                            <span class="sr-only">Plus d’informations</span><span class="sr-only">&nbsp;sur Titre de la ligne 1</span>

                        </button>
                    </div>
                </td>
            </tr>
            <tr id="tr-collapse-1" class="tr-collapse">
                <td hidden colspan="4">
                    Contenu masqué
                </td>
            </tr>
            <tr>
                <td>Contenu</td>
                <td>Contenu</td>
                <td>Contenu</td>
                <td>
                    <div class="table-tools-group">
                        <button class="btn btn-secondary btn-ratio-square is-rotating" data-ft-collapse="tr-collapse-2" id="button_762016273" type="button" data-ft-tooltip="Plus d’informations" data-ft-vocalize="false">
                            <span aria-hidden="true" class="icon icon-chevron-sm-d"></span>
                            <span class="sr-only">Plus d’informations</span><span class="sr-only">&nbsp;sur Titre de la ligne 2</span>

                        </button>
                    </div>
                </td>
            </tr>
            <tr id="tr-collapse-2" class="tr-collapse">
                <td hidden colspan="4">
                    Contenu masqué
                </td>
            </tr>
            <tr>
                <td>Contenu</td>
                <td>Contenu</td>
                <td>Contenu</td>
                <td>
                    <div class="table-tools-group">
                        <button class="btn btn-secondary btn-ratio-square is-rotating" data-ft-collapse="tr-collapse-3" id="button_909811615" type="button" data-ft-tooltip="Plus d’informations" data-ft-vocalize="false">
                            <span aria-hidden="true" class="icon icon-chevron-sm-d"></span>
                            <span class="sr-only">Plus d’informations</span><span class="sr-only">&nbsp;sur Titre de la ligne 3</span>

                        </button>
                    </div>
                </td>
            </tr>
            <tr id="tr-collapse-3" class="tr-collapse">
                <td hidden colspan="4">
                    Contenu masqué
                </td>
            </tr>
        </tbody>
    </table>
</div>
ft-autoloader.js