Table headings not shown on mobile devices

Question

According to their examples and documentation, you should be able to see the headers when you are on your mobile phone:

tableaw doc

desktop drive demonstration

However, when I try to do this with the following table:

<table id="table-client" class="table table-responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack"

I get the following:

As you can see without headlines.

I searched around and saw that the guy on github was experiencing the same problem, but he could not solve the problem.

My question is for you guys, has anyone ever encountered a problem and knew how to fix it?

Answer 1

html, , . , , , .

, CSS. , , .

jQuery (v3.1.1), , (v2.1.1), , , .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://filamentgroup.imtqy.com/tablesaw/dist/tablesaw.js"></script>
<script src="https://filamentgroup.imtqy.com/tablesaw/dist/tablesaw-init.js"></script>
<link rel="stylesheet" href="http://filamentgroup.imtqy.com/tablesaw/dist/tablesaw.css">


<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack" id="tablesaw-5335">
  <thead>
    <tr>
      <th scope="col" data-tablesaw-priority="persist">Movie Title</th>
      <th scope="col" data-tablesaw-sortable-default-col="" data-tablesaw-priority="3">Rank</th>
      <th scope="col" data-tablesaw-priority="2">Year</th>
      <th scope="col" data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th scope="col" data-tablesaw-priority="4">Gross</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">1</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2009</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">83%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$2.7B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">2</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">1997</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">88%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$2.1B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">3</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2012</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">92%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.5B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">4</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2011</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">96%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.3B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">5</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2013</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">89%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.2B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">6</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2013</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">78%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.2B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">7</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2011</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">36%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.1B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">8</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2003</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">95%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.1B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">9</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2012</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">92%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.1B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">10</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2014</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">18%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.0B</span></td>
    </tr>
  </tbody>
</table>

Hide result

Answer 2

.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="tablesaw.css">
    <script src="tablesaw.js"></script>
    <script src="tablesaw-init.js"></script>
</head>
<body>
    <table class="table table-responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
            <thead>
                <tr>
                    <th>Movie Title</th>
                    <th>Rank</th>
                    <th>Year</th>
                    <th>Rating</abbr></th>
                    <th>Gross</th>
                    <th>Rating</abbr></th>
                    <th>Gross</th>
                    <th>Rating</abbr></th>
                    <th>Gross</th>
                    <th>Rating</abbr></th>
                    <th>Gross</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
                    <td>1</td>
                    <td>2009</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                </tr>
                <tr>
                    <td><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
                    <td>2</td>
                    <td>1997</td>
                    <td>88%</td>
                    <td>$2.1B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                </tr>
            </tbody>
    </table>
</body>
</html>