Html Tablesaw在Safari上不起作用

我有一个实现tablesaw堆栈模式的表。它在Google Chrome、Mozilla Firefox、Internet Explorer和Edge上运行良好，直到最近我才发现在Safari/iOS Safari上tablesaw的布局是扭曲的。我尝试了最新版本的tablesaw和Safari，但布局仍然扭曲

电影名称
等级
年
1.
2009
83%
27亿美元
2.
1997
88%
21亿美元

Safari的结果：

PS：我不能使用代码片段。请点击代码笔链接

更新： 我发现布局与声明的

一起工作。但是，一旦我声明了这一点，网页就不会加载我的css内容。我试过：

Add type=“text/css”->不起作用

Add rel=“stylesheet”->不起作用

在外部css文件中添加缺少的px/%->不起作用

电影名称
等级
年
1.
2009
83%
27亿美元
9
2012
92%
11亿美元
10
2014
18%
10亿美元

嘿。如果你能解释一下答案就好了。

<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>