Tables: Flexbox

Although it's ideal to render tabular data inside a table, there are some times when you don't want to use table markup to do so. There's where the "flex-table" styles come into play. Also, because a "flex-table" uses flexbox, they're responsive by default.

Name
Alter Ego
Superpowers
Home
Silver Surfer
Norrin Radd
Power Cosmic
Zenn-La
Nova
Richard Rider
Flight; Superhuman strength, speed, and durability; Expert hand to hand combatant; Xandarian Worldmind; Gravity manipulation
Earth
Adam Warlock
Superhuman strength; stamina; agility; endurance; flight; Energy manipulation
Earth
Gladiator
Kallark
Superhuman strength, speed, stamina, agility, reflexes, and durability; Psionic abilities; Flight
Strontian 

<div class="flex-table">

    <div class="flex-table__tr flex-table__tr--header">
        <div class="flex-table-td">
            Column 1
        </div>
        <div class="flex-table-td">
            Column 2
        </div>
        <div class="flex-table-td">
            Column 3
        </div>
    </div>

    <div class="flex-table__tr">
        <div class="flex-table-td" data-header="Column 1">
            [Content]
        </div>
        <div class="flex-table-td" data-header="Column 2">
            [Content]
        </div>
        <div class="flex-table-td" data-header="Column 3">
            [Content]
        </div>
    </div>
    
    [...]

    <div class="flex-table__tr">
        <div class="flex-table-td" data-header="Column 1">
            [Content]
        </div>
        <div class="flex-table-td" data-header="Column 2">
            [Content]
        </div>
        <div class="flex-table-td" data-header="Column 3">
            [Content]
        </div>
    </div>

</div>

Linked Rows

A flex-table's rows can also be linked by wrapping the "flex-table__tr" elements in an a tag.

Name
Alter Ego
Superpowers
Home
Silver Surfer
Norrin Radd
Power Cosmic
Zenn-La
Nova
Richard Rider
Flight; Superhuman strength, speed, and durability; Expert hand to hand combatant; Xandarian Worldmind; Gravity manipulation
Earth
Adam Warlock
Superhuman strength; stamina; agility; endurance; flight; Energy manipulation
Earth
Gladiator
Kallark
Superhuman strength, speed, stamina, agility, reflexes, and durability; Psionic abilities; Flight
Strontian 

<div class="flex-table flex-table--has-links">

    <div class="flex-table__tr flex-table__tr--header">
        <div class="flex-table-td">
            Column 1
        </div>
        <div class="flex-table-td">
            Column 2
        </div>
        <div class="flex-table-td">
            Column 3
        </div>
    </div>

    <a href="[URL]">
        <div class="flex-table__tr">
            <div class="flex-table-td" data-header="Column 1">
                [Content]
            </div>
            <div class="flex-table-td" data-header="Column 2">
                [Content]
            </div>
            <div class="flex-table-td" data-header="Column 3">
                [Content]
            </div>
        </div>
    </a>
    
    [...]

    <a href="[URL]">
        <div class="flex-table__tr">
            <div class="flex-table-td" data-header="Column 1">
                [Content]
            </div>
            <div class="flex-table-td" data-header="Column 2">
                [Content]
            </div>
            <div class="flex-table-td" data-header="Column 3">
                [Content]
            </div>
        </div>
    </a>

</div>

Controlling Cell Width

If a cell needs to expand so that it's a bit wider than the others, then add the "flex-table-td--expand" class to it. But make sure that class is added to all of the corresponding "flex-table-td" elements in all of the "flex-table__tr" elements.

Name
Alter Ego
Superpowers
Home
Silver Surfer
Norrin Radd
Power Cosmic
Zenn-La
Nova
Richard Rider
Flight; Superhuman strength, speed, and durability; Expert hand to hand combatant; Xandarian Worldmind; Gravity manipulation
Earth
Adam Warlock
Superhuman strength; stamina; agility; endurance; flight; Energy manipulation
Earth
Gladiator
Kallark
Superhuman strength, speed, stamina, agility, reflexes, and durability; Psionic abilities; Flight
Strontian 

<div class="flex-table flex-table--has-links">

    <div class="flex-table__tr flex-table__tr--header">
        <div class="flex-table-td">
            Column 1
        </div>
        <div class="flex-table-td flex-table-td--expand">
            Column 2
        </div>
        <div class="flex-table-td">
            Column 3
        </div>
    </div>

    <a href="[URL]">
        <div class="flex-table__tr">
            <div class="flex-table-td" data-header="Column 1">
                [Content]
            </div>
            <div class="flex-table-td flex-table-td--expand" data-header="Column 2">
                [Content]
            </div>
            <div class="flex-table-td" data-header="Column 3">
                [Content]
            </div>
        </div>
    </a>
    
    [...]

    <a href="[URL]">
        <div class="flex-table__tr">
            <div class="flex-table-td" data-header="Column 1">
                [Content]
            </div>
            <div class="flex-table-td flex-table-td--expand" data-header="Column 2">
                [Content]
            </div>
            <div class="flex-table-td" data-header="Column 3">
                [Content]
            </div>
        </div>
    </a>

</div>