DSB Digitalprofil

Tabelltilpasninger for DSB.

Dette er en annen tilnærming til responsive tabeller enn Bootstraps, som er basert på å kollapse tabellen til full bredde der hver kolonne vises som en rad i stedet. Inspirert av en løsning presentert på css-tricks.com.

Løsningen er basert på SASS, og for at kolonnene skal få korrekte etiketter må det genereres en css-klasse med den inkluderte mixin. Hvordan dette er gjort for tabellen som vises nedenfor er vist i en kommentar over selve tabellen.

Fornavn	Etternavn	Fødested	Fødselsår
James Byron	Dean	Marion, Indiana, USA	1931
Thomas Sean	Connery	Edinburgh, Storbritannia	1930
Marilyn	Monroe	LA, California, USA	1926

{{ (!showcode1) ? "Vis" : "Skjul" }} kode

            <!--
.moviestars-table {
    @media (max-width: $screen-sm - 1) {
        $labels: ('Fornavn', 'Etternavn', 'Fødested', 'Fødselsår');
        @include responsive-table($labels);
    }
}
-->

<table class="table table-hover table-striped table-bordered table-responsive moviestars-table">
    <thead>
        <tr>
            <th>Fornavn</th>
            <th>Etternavn</th>
            <th>Fødested</th>
            <th>Fødselsår</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James Byron</td>
            <td>Dean</td>
            <td>Marion, Indiana, USA</td>
            <td>1931</td>
        </tr>
        <tr>
            <td>Thomas Sean</td>
            <td>Connery</td>
            <td>Edinburgh, Storbritannia</td>
            <td>1930</td>
        </tr>
        <tr>
            <td>Marilyn</td>
            <td>Monroe</td>
            <td>LA, California, USA</td>
            <td>1926</td>
        </tr>
    </tbody>
</table>

Tabeller

Responsive tabell