CODEWITHSUNDEEP
htmlcsshtml-table
meandme
meandme

Reputation: 2477

Responsive Table on Two or more table with different table header

How to make the responsive table work on two or multiple table in the same page with different table header? When view on mobile or tablet the table header get label data from the CSS. So how to modify the CSS to include label data for table 2 n so on. http://css-tricks.com/responsive-data-tables/

/*
    Label the data
    */
    td:nth-of-type(1):before { content: "First Name"; }
    td:nth-of-type(2):before { content: "Last Name"; }
    td:nth-of-type(3):before { content: "Job Title"; }
    td:nth-of-type(4):before { content: "Favorite Color"; }
    td:nth-of-type(5):before { content: "Wars of Trek?"; }
    td:nth-of-type(6):before { content: "Porn Name"; }
    td:nth-of-type(7):before { content: "Date of Birth"; }
    td:nth-of-type(8):before { content: "Dream Vacation City"; }
    td:nth-of-type(9):before { content: "GPA"; }
    td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

Table 1

<table>
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Favorite Color</th>
            <th>Wars or Trek?</th>
            <th>Porn Name</th>
            <th>Date of Birth</th>
            <th>Dream Vacation City</th>
            <th>GPA</th>
            <th>Arbitrary Data</th>
        </tr>
        </thead>

now for table 2 what the solution in the CSS?

<table>
        <thead>
        <tr>
            <th>Place</th>
            <th>Visit</th>
            <th>Game</th>

        </tr>
        </thead>

Upvotes: 1

Views: 2407

Answers (1)

dc5
dc5

Reputation: 12441

You need to add some way of referencing the tables separately - i.e.: give each of your tables a unique id or css class and change your css to use a selector that matches.

See: MDN - Selectors

For example:

HTML

<table class="table1">
    …
</table>

<table class="table2">
    ….
</table>

CSS

.table1 td:nth-of-type(1):before { content: "First Name"; }
.table1 td:nth-of-type(2):before { content: "Last Name"; }
.table1 td:nth-of-type(3):before { content: "Job Title"; }
…

.table2 td:nth-of-type(1):before { content: "Place"; }
.table2 td:nth-of-type(2):before { content: "Visit"; }
.table2 td:nth-of-type(3):before { content: "Game"; }

Upvotes: 4

Related Questions