0

I have a table that implements tablesaw-stack mode. It works fine on Google Chrome, Mozilla Firefox, Internet Explorer, Edge until recently I found out that the tablesaw layout is distorted on Safari/iOS Safari. I have tried with the latest version of tablesaw and Safari but the layout remains distorted.

Codepen

<div class="container">
<table class="tablesaw" data-tablesaw-mode="stack">
            <thead>
                <tr>
                    <th>Movie Title</th>
                    <th>Rank</th>
                    <th>Year</th>
                    <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                    <th>Gross</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="title"><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>
                </tr>
                <tr>
                    <td class="title"><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>
                </tr>
            </tbody>
        </table>
</div>

Result on Safari:

enter image description here

PS: I couldn't use code snippet. Please click on the Codepen link.

Update: I have found out that the the layout works with declared <!DOCTYPE html>. However, once I declare that, the webpage does not load my css content. I have tried:

  1. Add type="text/css" -> does not work
  2. Add rel="stylesheet" -> does not work
  3. Add missing px/% at the external css file -> does not work
Brian Cheong
  • 61
  • 3
  • 12

1 Answers1

0

<div class="container">
  <table class="tablesaw" data-tablesaw-mode="stack">
    <thead>
      <tr>
        <th>Movie Title</th>
        <th>Rank</th>
        <th>Year</th>
        <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
        <th>Gross</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="title"><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>
      </tr>
      <tr>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
        <td>9</td>
        <td>2012</td>
        <td>92%</td>
        <td>$1.1B</td>
      </tr>
      <tr>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
        <td>10</td>
        <td>2014</td>
        <td>18%</td>
        <td>$1.0B</td>
      </tr>
    </tbody>
  </table>
</div>
m4n0
  • 29,823
  • 27
  • 76
  • 89