DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Do you have a responsive grid solution?

Do you have a responsive grid solution?

rjiangrjiang Posts: 2Questions: 1Answers: 0
in Free community support

hello,

I am looking for a responsive grid example, using "div" instead "table". So the page can adapt to different devices(Iphone, Android, Desktop)
Anyone can help?

Thanks,
rjiang

Answers

  • rjiangrjiang Posts: 2Questions: 1Answers: 0
    edited July 2019

    I tried following html code, it is not working. I use Chrome to test the responsive, and the column does not hide when I change to any mobile device from Chrome.

    <!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>DEMO</title>
</head>



<body>
  <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css" />
  <script type="text/javascript" src="DataTables/datatables.min.js"></script>

  <table id="example" class="display responsive nowrap" width="100%">
    <thead>
      <tr>
        <th data-priority="1">First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        <th>E-mail</th>
        <th data-priority="2">Extn.</th>
      </tr>
    </thead>
  </table>
</body>
  • colincolin Posts: 15,144Questions: 1Answers: 2,586

    Hi @rjiang ,

    Sorry, DataTables is based around the <table> element.

    Cheers,

    Colin

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.