Responsive Table design Issue

Question

I want to show a table as responsive in jsp.

I am using a displaytag for displaying the table and for pagination.

While I tried to make it responsive, I followed the steps in http://css-tricks.com/responsive-data-tables/ and done it. But the name in the <thead> tag differ from the table in the responsive.

He also explain to use

<td data-label="First name">Chris</td>

td:before { content: attr(data-label); }

To make content stays in HTML not in CSS.

But when I used it in the jsp it shows the warning as

Undefined attribute name data-title and Undefined attribute name data-label

inside the <display:column> tag.

Please suggest me any other way to declare the "data-title or data-label" attribute in the <display:column> tag.

Answer 1

As requested, here is one way to add data-label attributes to your <td> elements using plain old core JSTL.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<table>
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
        </tr>
    </thead>
    <tbody>
    <c:forEach var="person" items="people">
        <tr>
            <td data-label="First name"><c:out value="person.firstName" /></td>
            <td data-label="Last name"><c:out value="person.lastName" /></td>
        </tr>
    </c:forEach>
    </tbody>
</table>

Note: this does not use the displaytable library.